<!doctype html><html lang="en">
 <head>
  <meta charset="utf-8">
  <meta content="width=device-width, initial-scale=1, shrink-to-fit=no" name="viewport">
  <meta content="#3c790a" name="theme-color">
  <title>Notifications API Standard</title>
  <link crossorigin href="https://resources.whatwg.org/spec.css" rel="stylesheet">
  <link crossorigin href="https://resources.whatwg.org/standard.css" rel="stylesheet">
  <link crossorigin href="https://resources.whatwg.org/standard-shared-with-dev.css" rel="stylesheet">
  <link crossorigin href="https://resources.whatwg.org/logo-notifications.svg" rel="icon">
<script async crossorigin src="https://resources.whatwg.org/file-issue.js"></script>
<script async crossorigin src="https://resources.whatwg.org/commit-snapshot-shortcut-key.js"></script>
<style>/* style-dfn-panel */

.dfn-panel {
    position: absolute;
    z-index: 35;
    height: auto;
    width: -webkit-fit-content;
    width: fit-content;
    max-width: 300px;
    max-height: 500px;
    overflow: auto;
    padding: 0.5em 0.75em;
    font: small Helvetica Neue, sans-serif, Droid Sans Fallback;
    background: #DDDDDD;
    color: black;
    border: outset 0.2em;
}
.dfn-panel:not(.on) { display: none; }
.dfn-panel * { margin: 0; padding: 0; text-indent: 0; }
.dfn-panel > b { display: block; }
.dfn-panel a { color: black; }
.dfn-panel a:not(:hover) { text-decoration: none !important; border-bottom: none !important; }
.dfn-panel > b + b { margin-top: 0.25em; }
.dfn-panel ul { padding: 0; }
.dfn-panel li { list-style: inside; }
.dfn-panel.activated {
    display: inline-block;
    position: fixed;
    left: .5em;
    bottom: 2em;
    margin: 0 auto;
    max-width: calc(100vw - 1.5em - .4em - .5em);
    max-height: 30vh;
}

.dfn-paneled { cursor: pointer; }
</style>
 <body class="h-entry status-LS">
  <div class="head">
   <p data-fill-with="logo"><a class="logo" href="https://whatwg.org/"> <img alt="WHATWG" crossorigin height="100" src="https://resources.whatwg.org/logo-notifications.svg"> </a> </p>
   <hgroup>
    <h1 class="p-name no-ref" id="title">Notifications API</h1>
    <h2 class="no-num no-toc no-ref heading settled" id="subtitle"><span class="content">Living Standard — Last Updated <time class="dt-updated" datetime="1970-01-01">1 January 1970</time></span></h2>
   </hgroup>
   <div data-fill-with="spec-metadata">
    <dl>
     <dt>Participate:
     <dd><a href="https://github.com/whatwg/notifications">GitHub whatwg/notifications</a> (<a href="https://github.com/whatwg/notifications/issues/new">new issue</a>, <a href="https://github.com/whatwg/notifications/issues">open issues</a>)
     <dd><a href="https://wiki.whatwg.org/wiki/IRC">IRC: #whatwg on Freenode</a>
     <dt>Commits:
     <dd><a href="https://github.com/whatwg/notifications/commits">GitHub whatwg/notifications/commits</a>
     <dd>[SNAPSHOT-LINK]
     <dd><a href="https://twitter.com/notifyapi">@notifyapi</a>
     <dt>Tests:
     <dd><a href="https://github.com/web-platform-tests/wpt/tree/master/notifications">web-platform-tests notifications/</a> (<a href="https://github.com/web-platform-tests/wpt/labels/notifications">ongoing work</a>)
     <dt>Translations <small>(non-normative)</small>:
     <dd><span title="Japanese"><a href="https://triple-underscore.github.io/notifications-ja.html" hreflang="ja" lang="ja" rel="alternate">日本語</a></span>
     <dd><span title="Simplified Chinese"><a href="https://w3c-html-ig-zh.github.io/notifications/whatwg/" hreflang="zh-cn" lang="zh-cn" rel="alternate">简体中文</a></span>
    </dl>
   </div>
   <div data-fill-with="warning"></div>
  </div>
  <div class="p-summary" data-fill-with="abstract">
   <h2 class="no-num no-toc no-ref heading settled" id="abstract"><span class="content">Abstract</span></h2>
   <p>This standard defines an API to display notifications to the end user, typically outside the top-level browsing context’s viewport. It is designed to be compatible with existing notification systems, while remaining platform-independent.</p>
  </div>
  <nav data-fill-with="table-of-contents" id="toc">
   <h2 class="no-num no-toc no-ref" id="contents">Table of Contents</h2>
   <ol class="toc" role="directory">
    <li><a href="#terminology"><span class="secno">1</span> <span class="content">Terminology</span></a>
    <li>
     <a href="#notifications"><span class="secno">2</span> <span class="content">Notifications</span></a>
     <ol class="toc">
      <li><a href="#lifetime-and-ui-integrations"><span class="secno">2.1</span> <span class="content">Lifetime and UI integration</span></a>
      <li><a href="#permission-model"><span class="secno">2.2</span> <span class="content">Permission model</span></a>
      <li><a href="#direction"><span class="secno">2.3</span> <span class="content">Direction</span></a>
      <li><a href="#language"><span class="secno">2.4</span> <span class="content">Language</span></a>
      <li><a href="#resources"><span class="secno">2.5</span> <span class="content">Resources</span></a>
      <li><a href="#showing-a-notification"><span class="secno">2.6</span> <span class="content">Showing a notification</span></a>
      <li><a href="#activating-a-notification"><span class="secno">2.7</span> <span class="content">Activating a notification</span></a>
      <li><a href="#closing-a-notification"><span class="secno">2.8</span> <span class="content">Closing a notification</span></a>
      <li><a href="#alerting-the-user"><span class="secno">2.9</span> <span class="content">Alerting the user</span></a>
     </ol>
    <li>
     <a href="#api"><span class="secno">3</span> <span class="content">API</span></a>
     <ol class="toc">
      <li><a href="#garbage-collection"><span class="secno">3.1</span> <span class="content">Garbage collection</span></a>
      <li><a href="#constructors"><span class="secno">3.2</span> <span class="content">Constructors</span></a>
      <li><a href="#static-members"><span class="secno">3.3</span> <span class="content">Static members</span></a>
      <li><a href="#object-members"><span class="secno">3.4</span> <span class="content">Object members</span></a>
      <li>
       <a href="#examples"><span class="secno">3.5</span> <span class="content">Examples</span></a>
       <ol class="toc">
        <li><a href="#using-events"><span class="secno">3.5.1</span> <span class="content">Using events from a page</span></a>
        <li><a href="#using-actions"><span class="secno">3.5.2</span> <span class="content">Using actions from a service worker</span></a>
        <li><a href="#tags-example"><span class="secno">3.5.3</span> <span class="content">Using the <code>tag</code> member for multiple instances</span></a>
        <li><a href="#using-the-tag-member-for-a-single-instance"><span class="secno">3.5.4</span> <span class="content">Using the <code>tag</code> member for a single instance</span></a>
       </ol>
     </ol>
    <li><a href="#service-worker-api"><span class="secno">4</span> <span class="content">Service worker API</span></a>
    <li><a href="#acknowledgments"><span class="secno"></span> <span class="content">Acknowledgments</span></a>
    <li>
     <a href="#index"><span class="secno"></span> <span class="content">Index</span></a>
     <ol class="toc">
      <li><a href="#index-defined-here"><span class="secno"></span> <span class="content">Terms defined by this specification</span></a>
      <li><a href="#index-defined-elsewhere"><span class="secno"></span> <span class="content">Terms defined by reference</span></a>
     </ol>
    <li>
     <a href="#references"><span class="secno"></span> <span class="content">References</span></a>
     <ol class="toc">
      <li><a href="#normative"><span class="secno"></span> <span class="content">Normative References</span></a>
     </ol>
    <li><a href="#idl-index"><span class="secno"></span> <span class="content">IDL Index</span></a>
   </ol>
  </nav>
  <main>
   <h2 class="heading settled" data-level="1" id="terminology"><span class="secno">1. </span><span class="content">Terminology</span><a class="self-link" href="#terminology"></a></h2>
   <p>This specification depends on the Infra Standard. <a data-link-type="biblio" href="#biblio-infra">[INFRA]</a> </p>
   <p>Some terms used in this specification are defined in the DOM, Fetch, HTML, IDL, Service Workers,
URL, and Vibration API Standards. <a data-link-type="biblio" href="#biblio-dom">[DOM]</a> <a data-link-type="biblio" href="#biblio-fetch">[FETCH]</a> <a data-link-type="biblio" href="#biblio-html">[HTML]</a> <a data-link-type="biblio" href="#biblio-webidl">[WEBIDL]</a> <a data-link-type="biblio" href="#biblio-service-workers">[SERVICE-WORKERS]</a> <a data-link-type="biblio" href="#biblio-url">[URL]</a> <a data-link-type="biblio" href="#biblio-vibration">[VIBRATION]</a> </p>
   <h2 class="heading settled" data-level="2" id="notifications"><span class="secno">2. </span><span class="content">Notifications</span><a class="self-link" href="#notifications"></a></h2>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="concept-notification">notification</dfn> is an abstract
representation of something that happened, such as the delivery of a message. </p>
   <p>A <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification">notification</a> <em>can</em> have an associated <dfn class="dfn-paneled" data-dfn-for="notification" data-dfn-type="dfn" data-noexport id="service-worker-registration">service worker registration</dfn>. </p>
   <p>A <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification①">notification</a> has an associated <dfn class="dfn-paneled" data-dfn-for="notification" data-dfn-type="dfn" data-noexport id="concept-title">title</dfn> which is a DOMString. </p>
   <p>A <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification②">notification</a> has an associated <dfn class="dfn-paneled" data-dfn-for="notification" data-dfn-type="dfn" data-noexport id="body">body</dfn> which is a DOMString. </p>
   <p>A <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification③">notification</a> has an associated <dfn class="dfn-paneled" data-dfn-for="notification" data-dfn-type="dfn" data-noexport id="concept-direction">direction</dfn> which is one of <i>auto</i>, <i>ltr</i>, and <i>rtl</i>. </p>
   <p>A <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification④">notification</a> has an associated <dfn class="dfn-paneled" data-dfn-for="notification" data-dfn-type="dfn" data-noexport id="concept-language">language</dfn> which is a DOMString
representing either a valid BCP 47 language tag or the empty string. </p>
   <p>A <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification⑤">notification</a> has an associated <dfn class="dfn-paneled" data-dfn-for="notification" data-dfn-type="dfn" data-noexport id="tag">tag</dfn> which is a DOMString. </p>
   <p>A <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification⑥">notification</a> has an associated <dfn class="dfn-paneled" data-dfn-for="notification" data-dfn-type="dfn" data-noexport id="data">data</dfn>. </p>
   <p>A <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification⑦">notification</a> has an associated <dfn class="dfn-paneled" data-dfn-for="notification" data-dfn-type="dfn" data-noexport id="timestamp">timestamp</dfn> which
is a <code class="idl"><a data-link-type="idl" href="https://heycam.github.io/webidl/#DOMTimeStamp" id="ref-for-DOMTimeStamp">DOMTimeStamp</a></code> representing the time, in milliseconds since 00:00:00 UTC on 1 January 1970,
of the event for which the notification was created. </p>
   <p class="note" role="note">Timestamps can be used to indicate the time at which a notification
is actual. For example, this could be in the past when a notification is used for
a message that couldn’t immediately be delivered because the device was offline,
or in the future for a meeting that is about to start. </p>
   <p>A <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification⑧">notification</a> has an associated <dfn class="dfn-paneled" data-dfn-for="notification" data-dfn-type="dfn" data-noexport id="concept-origin">origin</dfn>. </p>
   <p>A <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification⑨">notification</a> has an associated <dfn class="dfn-paneled" data-dfn-for="notification" data-dfn-type="dfn" data-noexport id="renotify-preference-flag">renotify preference flag</dfn> which is initially
unset. When set indicates that the end user should be alerted after the <a data-link-type="dfn" href="#show-steps" id="ref-for-show-steps">show steps</a> have run
with a new notification that has the same <a data-link-type="dfn" href="#tag" id="ref-for-tag">tag</a> as an existing notification. </p>
   <p>A <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification①⓪">notification</a> has an associated <dfn class="dfn-paneled" data-dfn-for="notification" data-dfn-type="dfn" data-noexport id="silent-preference-flag">silent preference flag</dfn> which is initially
unset. When set indicates that no sounds or vibrations should be made. </p>
   <p>A <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification①①">notification</a> has an associated <dfn class="dfn-paneled" data-dfn-for="notification" data-dfn-type="dfn" data-noexport id="require-interaction-preference-flag">require interaction preference flag</dfn> which is initially unset. When set, indicates that on devices with a sufficiently large screen, the
notification should remain readily available until the user activates or dismisses the notification. </p>
   <p>A <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification①②">notification</a> <em>can</em> have these associated graphics: an <dfn class="dfn-paneled" data-dfn-for="notification" data-dfn-type="dfn" data-noexport id="image-url">image URL</dfn>, <dfn class="dfn-paneled" data-dfn-for="notification" data-dfn-type="dfn" data-noexport id="icon-url">icon URL</dfn>, and <dfn class="dfn-paneled" data-dfn-for="notification" data-dfn-type="dfn" data-noexport id="badge-url">badge URL</dfn>; and their corresponding <a data-link-type="dfn" href="#image-resource" id="ref-for-image-resource">image resource</a>, <a data-link-type="dfn" href="#icon-resource" id="ref-for-icon-resource">icon resource</a>, and <a data-link-type="dfn" href="#badge-resource" id="ref-for-badge-resource">badge resource</a>. </p>
   <p>An <dfn class="dfn-paneled" data-dfn-for="notification" data-dfn-type="dfn" data-noexport id="image-resource">image resource</dfn> is a picture shown as part of the
content of the <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification①③">notification</a>, and should be displayed with higher visual priority than the <a data-link-type="dfn" href="#icon-resource" id="ref-for-icon-resource①">icon resource</a> and <a data-link-type="dfn" href="#badge-resource" id="ref-for-badge-resource①">badge resource</a>, though it may be
displayed in fewer circumstances. </p>
   <p>An <dfn class="dfn-paneled" data-dfn-for="notification" data-dfn-type="dfn" data-noexport id="icon-resource">icon resource</dfn> is an image that reinforces the <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification①④">notification</a> (such as an icon, or a photo of the sender). </p>
   <p>A <dfn class="dfn-paneled" data-dfn-for="notification" data-dfn-type="dfn" data-noexport id="badge-resource">badge resource</dfn> is an icon representing the web
application, or the category of the <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification①⑤">notification</a> if the web application sends a wide variety
of <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification①⑥">notifications</a>. It <em>may</em> be used to represent the <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification①⑦">notification</a> when there is
not enough space to display the <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification①⑧">notification</a> itself. It <em>may</em> also be displayed inside
the <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification①⑨">notification</a>, but then it should have less visual priority than the <a data-link-type="dfn" href="#image-resource" id="ref-for-image-resource①">image resource</a> and <a data-link-type="dfn" href="#icon-resource" id="ref-for-icon-resource②">icon resource</a>. </p>
   <p>A <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification②⓪">notification</a> <em>can</em> have a <dfn class="dfn-paneled" data-dfn-for="notification" data-dfn-type="dfn" data-noexport id="vibration-pattern">vibration pattern</dfn>. </p>
   <p class="note" role="note">Developers are encouraged to not convey information through an <a data-link-type="dfn" href="#image-resource" id="ref-for-image-resource②">image</a>, <a data-link-type="dfn" href="#icon-resource" id="ref-for-icon-resource③">icon</a>, <a data-link-type="dfn" href="#badge-resource" id="ref-for-badge-resource②">badge</a>, or <a data-link-type="dfn" href="#vibration-pattern" id="ref-for-vibration-pattern">vibration pattern</a> that
is not otherwise accessible to the end user, especially since notification platforms that do not
support these features might ignore them. </p>
   <p>A <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification②①">notification</a> has an associated list of
zero or more <dfn class="dfn-paneled" data-dfn-for="notification" data-dfn-type="dfn" data-lt="action" data-noexport id="actions">actions</dfn>. Each <a data-link-type="dfn" href="#actions" id="ref-for-actions">action</a> has an associated <dfn class="dfn-paneled" data-dfn-for="action" data-dfn-type="dfn" data-noexport id="action-title">title</dfn> and <dfn class="dfn-paneled" data-dfn-for="action" data-dfn-type="dfn" data-noexport id="action-name">name</dfn> and <em>can</em> have an associated <dfn class="dfn-paneled" data-dfn-for="action" data-dfn-type="dfn" data-noexport id="action-icon-url">icon URL</dfn> and <dfn class="dfn-paneled" data-dfn-for="action" data-dfn-type="dfn" data-noexport id="action-icon-resource">icon resource</dfn>. Users may activate actions, as alternatives to
activating the notification itself. The user agent must determine the <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="maximum-number-of-actions">maximum number of actions</dfn> supported, within the constraints of the
notification platform. </p>
   <p class="note" role="note">Since display of actions is platform-dependent, developers are
encouraged to make sure that any action a user can invoke from a notification is
also available within the web application. </p>
   <p class="note no-backref" role="note">Some platforms might modify an <a data-link-type="dfn" href="#action-icon-resource" id="ref-for-action-icon-resource">icon resource</a> to better
match the platform’s visual style before displaying it to the user, for example by rounding the
corners or painting it in a specific color. Developers are encouraged to use an icon that handles
such cases gracefully and does not lose important information through, e.g., loss of color or
clipped corners. </p>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="non-persistent-notification">non-persistent notification</dfn> is a <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification②②">notification</a> without an associated <a data-link-type="dfn" href="#service-worker-registration" id="ref-for-service-worker-registration">service worker registration</a>. </p>
   <p>A <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="persistent-notification">persistent notification</dfn> is a <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification②③">notification</a> with an associated <a data-link-type="dfn" href="#service-worker-registration" id="ref-for-service-worker-registration①">service worker registration</a>. </p>
   <hr>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-lt="create a notification|creating a notification" data-noexport id="create-a-notification">create a notification</dfn>, given a <var>title</var>, <var>options</var>, and optionally a <var>serviceWorkerRegistration</var>, run
these steps: </p>
   <ol>
    <li>
     <p>Let <var>notification</var> be a new <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification②④">notification</a>. </p>
    <li>
     <p>If a <var>serviceWorkerRegistration</var> was provided, set <var>notification</var>’s <a data-link-type="dfn" href="#service-worker-registration" id="ref-for-service-worker-registration②">service worker registration</a> to <var>serviceWorkerRegistration</var>. </p>
    <li>
     <p>If a <var>serviceWorkerRegistration</var> was not provided and <var>options</var>’s <code>actions</code> is not empty, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw">throw</a> a <code>TypeError</code> exception. </p>
     <p class="note" role="note"><a data-link-type="dfn" href="#actions" id="ref-for-actions①">Actions</a> are only currently supported for <a data-link-type="dfn" href="#persistent-notification" id="ref-for-persistent-notification">persistent notifications</a>. </p>
    <li>
     <p>If <var>options</var>’s <code>silent</code> is true and <var>options</var>’s <code>vibrate</code> is present, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw①">throw</a> a <code>TypeError</code> exception. </p>
    <li>
     <p>If <var>options</var>’s <code>renotify</code> is true and <var>options</var>’s <code>tag</code> is the empty string, <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw②">throw</a> a <code>TypeError</code> exception. </p>
    <li>
     <p>Set <var>notification</var>’s <a data-link-type="dfn" href="#data" id="ref-for-data">data</a> to <a data-link-type="abstract-op" href="https://html.spec.whatwg.org/multipage/structured-data.html#structuredserializeforstorage" id="ref-for-structuredserializeforstorage">StructuredSerializeForStorage</a>(<var>options</var>’s <code>data</code>). Rethrow
  any exceptions. </p>
    <li>
     <p>Set <var>notification</var>’s <a data-link-type="dfn" href="#concept-title" id="ref-for-concept-title">title</a> to <var>title</var>. </p>
    <li>
     <p>Set <var>notification</var>’s <a data-link-type="dfn" href="#concept-direction" id="ref-for-concept-direction">direction</a> to <var>options</var>’s <code>dir</code>. </p>
    <li>
     <p>Set <var>notification</var>’s <a data-link-type="dfn" href="#concept-language" id="ref-for-concept-language">language</a> to <var>options</var>’s <code>lang</code>. </p>
    <li>
     <p>Set <var>notification</var>’s <a data-link-type="dfn" href="#concept-origin" id="ref-for-concept-origin">origin</a> to the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#entry-settings-object" id="ref-for-entry-settings-object">entry settings object</a>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin" id="ref-for-concept-settings-object-origin">origin</a>. </p>
    <li>
     <p>Set <var>notification</var>’s <a data-link-type="dfn" href="#body" id="ref-for-body">body</a> to <var>options</var>’s <code>body</code>. </p>
    <li>
     <p>Set <var>notification</var>’s <a data-link-type="dfn" href="#tag" id="ref-for-tag①">tag</a> to <var>options</var>’s <code>tag</code>. </p>
    <li>
     <p>Let <var>baseURL</var> be the API base URL specified by the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#entry-settings-object" id="ref-for-entry-settings-object①">entry settings object</a>. <span class="XXX">Or incumbent?</span> </p>
    <li>
     <p>If <var>options</var>’s <code>image</code> is present, <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url-parser" id="ref-for-concept-url-parser">parse</a> it using <var>baseURL</var>, and if that does not
  return failure, set <var>notification</var>’s <a data-link-type="dfn" href="#image-url" id="ref-for-image-url">image URL</a> to the return
  value. (Otherwise <a data-link-type="dfn" href="#image-url" id="ref-for-image-url①">image URL</a> is not set.) </p>
    <li>
     <p>If <var>options</var>’s <code>icon</code> is present, <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url-parser" id="ref-for-concept-url-parser①">parse</a> it using <var>baseURL</var>, and if that does not
  return failure, set <var>notification</var>’s <a data-link-type="dfn" href="#icon-url" id="ref-for-icon-url">icon URL</a> to the return
  value. (Otherwise <a data-link-type="dfn" href="#icon-url" id="ref-for-icon-url①">icon URL</a> is not set.) </p>
    <li>
     <p>If <var>options</var>’s <code>badge</code> is present, <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url-parser" id="ref-for-concept-url-parser②">parse</a> it using <var>baseURL</var>, and if that does not
  return failure, set <var>notification</var>’s <a data-link-type="dfn" href="#badge-url" id="ref-for-badge-url">badge URL</a> to the return
  value. (Otherwise <a data-link-type="dfn" href="#badge-url" id="ref-for-badge-url①">badge URL</a> is not set.) </p>
    <li>
     <p>If <var>options</var>’s <code>vibrate</code> is present, <a data-link-type="dfn" href="https://w3c.github.io/vibration/#dfn-validate-and-normalize" id="ref-for-dfn-validate-and-normalize">validate and normalize</a> it and set <var>notification</var>’s <a data-link-type="dfn" href="#vibration-pattern" id="ref-for-vibration-pattern①">vibration pattern</a> to the return value. (Otherwise <a data-link-type="dfn" href="#vibration-pattern" id="ref-for-vibration-pattern②">vibration pattern</a> is not set.) </p>
    <li>
     <p>If <var>options</var>’s <code>timestamp</code> is present, set <var>notification</var>’s <a data-link-type="dfn" href="#timestamp" id="ref-for-timestamp">timestamp</a> to the value. Otherwise, set <var>notification</var>’s <a data-link-type="dfn" href="#timestamp" id="ref-for-timestamp①">timestamp</a> to the number of milliseconds that
  passed between 00:00:00 UTC on 1 January 1970 and the time at which the <code>Notification</code> constructor was called. </p>
    <li>
     <p>If <var>options</var>’s <code>renotify</code> is true, set <var>notification</var>’s <a data-link-type="dfn" href="#renotify-preference-flag" id="ref-for-renotify-preference-flag">renotify preference flag</a>. </p>
    <li>
     <p>If <var>options</var>’s <code>silent</code> is true, set <var>notification</var>’s <a data-link-type="dfn" href="#silent-preference-flag" id="ref-for-silent-preference-flag">silent preference flag</a>. </p>
    <li>
     <p>If <var>options</var>’s <code>requireInteraction</code> is true, set <var>notification</var>’s <a data-link-type="dfn" href="#require-interaction-preference-flag" id="ref-for-require-interaction-preference-flag">require interaction preference flag</a>. </p>
    <li>
     <p>Set <var>notification</var>’s list of <a data-link-type="dfn" href="#actions" id="ref-for-actions②">actions</a> to an empty list,
  then for each <var>entry</var> in <var>options</var>’s <code>actions</code>,
  up to the <a data-link-type="dfn" href="#maximum-number-of-actions" id="ref-for-maximum-number-of-actions">maximum number of actions</a> supported (skip any excess
  entries), perform the following steps: </p>
     <ol>
      <li>
       <p>Let <var>action</var> be a new <a data-link-type="dfn" href="#actions" id="ref-for-actions③">action</a>. </p>
      <li>
       <p>Set <var>action</var>’s <a data-link-type="dfn" href="#action-name" id="ref-for-action-name">name</a> to the <var>entry</var>’s <code>action</code>. </p>
      <li>
       <p>Set <var>action</var>’s <a data-link-type="dfn" href="#action-title" id="ref-for-action-title">title</a> to the <var>entry</var>’s <code>title</code>. </p>
      <li>
       <p>If <var>entry</var>’s <code>icon</code> is present, <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url-parser" id="ref-for-concept-url-parser③">parse</a> it using <var>baseURL</var>, and if that does
    not return failure, set <var>action</var>’s <a data-link-type="dfn" href="#action-icon-url" id="ref-for-action-icon-url">icon URL</a> to the
    return value. (Otherwise <a data-link-type="dfn" href="#action-icon-url" id="ref-for-action-icon-url①">icon URL</a> is not set.) </p>
      <li>
       <p>Append <var>action</var> to <var>notification</var>’s list of <a data-link-type="dfn" href="#actions" id="ref-for-actions④">actions</a>. </p>
     </ol>
    <li>
     <p>Return <var>notification</var>. </p>
   </ol>
   <h3 class="heading settled" data-level="2.1" id="lifetime-and-ui-integrations"><span class="secno">2.1. </span><span class="content">Lifetime and UI integration</span><a class="self-link" href="#lifetime-and-ui-integrations"></a></h3>
   <p>The user agent must keep a <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="list-of-notifications">list of notifications</dfn>, which is a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list" id="ref-for-list">list</a> of zero
or more <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification②⑤">notifications</a>. </p>
   <p>User agents should run the <a data-link-type="dfn" href="#close-steps" id="ref-for-close-steps">close steps</a> for a <a data-link-type="dfn" href="#non-persistent-notification" id="ref-for-non-persistent-notification">non-persistent notification</a> a couple of seconds after they have been
created. </p>
   <p>User agents should not display <a data-link-type="dfn" href="#non-persistent-notification" id="ref-for-non-persistent-notification①">non-persistent notification</a> in a
platform’s "notification center" (if available). </p>
   <p>User agents should persist <a data-link-type="dfn" href="#persistent-notification" id="ref-for-persistent-notification①">persistent notifications</a> until they are
removed from the <a data-link-type="dfn" href="#list-of-notifications" id="ref-for-list-of-notifications">list of notifications</a>. </p>
   <p class="example" id="example-38bbd8ee"><a class="self-link" href="#example-38bbd8ee"></a>A <a data-link-type="dfn" href="#persistent-notification" id="ref-for-persistent-notification②">persistent notification</a> could have the <code class="idl"><a data-link-type="idl" href="#dom-notification-close" id="ref-for-dom-notification-close">close()</a></code> method invoked of one of its <code class="idl"><a data-link-type="idl" href="#notification" id="ref-for-notification">Notification</a></code> objects. </p>
   <p>User agents should display <a data-link-type="dfn" href="#persistent-notification" id="ref-for-persistent-notification③">persistent notifications</a> in a platform’s
"notification center" (if available). </p>
   <h3 class="heading settled" data-level="2.2" id="permission-model"><span class="secno">2.2. </span><span class="content">Permission model</span><a class="self-link" href="#permission-model"></a></h3>
   <p><a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification②⑥">Notifications</a> can only be displayed if the
user (or user agent on behalf of the user) has granted <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="permission">permission</dfn>.
The <a data-link-type="dfn" href="#permission" id="ref-for-permission">permission</a> to show <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification②⑦">notifications</a> for a given <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/origin.html#concept-origin" id="ref-for-concept-origin①">origin</a> is one of three strings: </p>
   <dl>
    <dt>"<code>default</code>" 
    <dd>
     <p>This is equivalent to "<code>denied</code>", but the user has made no
  explicit choice thus far. </p>
    <dt>"<code>denied</code>" 
    <dd>
     <p>This means the user does not want <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification②⑧">notifications</a>. </p>
    <dt>"<code>granted</code>" 
    <dd>
     <p>This means <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification②⑨">notifications</a> can be
  displayed. </p>
   </dl>
   <p class="note" role="note">There is no equivalent to "<code>default</code>"
meaning "<code>granted</code>". In that case
"<code>granted</code>" is simply returned as there would be no reason
for the application to ask for <a data-link-type="dfn" href="#permission" id="ref-for-permission①">permission</a>. </p>
   <h3 class="heading settled" data-level="2.3" id="direction"><span class="secno">2.3. </span><span class="content">Direction</span><a class="self-link" href="#direction"></a></h3>
   <p>This section is written in terms equivalent to those used in the Rendering
section of HTML. <a data-link-type="biblio" href="#biblio-html">[HTML]</a> </p>
   <p>User agents are expected to honor the Unicode semantics of the text of a <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification③⓪">notification</a>’s <a data-link-type="dfn" href="#concept-title" id="ref-for-concept-title①">title</a>, <a data-link-type="dfn" href="#body" id="ref-for-body①">body</a>, and the <a data-link-type="dfn" href="#action-title" id="ref-for-action-title①">title</a> of each of its <a data-link-type="dfn" href="#actions" id="ref-for-actions⑤">actions</a>. Each is expected
to be treated as an independent set of one or more bidirectional algorithm
paragraphs when displayed, as defined by the bidirectional algorithm’s rules P1,
P2, and P3, including, for instance, supporting the paragraph-breaking behavior
of U+000A LINE FEED (LF) characters. For each paragraph of the <a data-link-type="dfn" href="#concept-title" id="ref-for-concept-title②">title</a>, <a data-link-type="dfn" href="#body" id="ref-for-body②">body</a> and the <a data-link-type="dfn" href="#action-title" id="ref-for-action-title②">title</a> of each of the <a data-link-type="dfn" href="#actions" id="ref-for-actions⑥">actions</a>, the <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification③①">notification</a>’s <a data-link-type="dfn" href="#concept-direction" id="ref-for-concept-direction①">direction</a> provides the higher-level override of
rules P2 and P3 if it has a value other than "<code>auto</code>". <a data-link-type="biblio" href="#biblio-bidi">[BIDI]</a> </p>
   <p>The <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification③②">notification</a>’s <a data-link-type="dfn" href="#concept-direction" id="ref-for-concept-direction②">direction</a> also determines the relative order in
which the <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification③③">notification</a>’s <a data-link-type="dfn" href="#actions" id="ref-for-actions⑦">actions</a> should be displayed to the user, if
the notification platform displays them side by side. </p>
   <h3 class="heading settled" data-level="2.4" id="language"><span class="secno">2.4. </span><span class="content">Language</span><a class="self-link" href="#language"></a></h3>
   <p>The <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification③④">notification</a>’s <a data-link-type="dfn" href="#concept-language" id="ref-for-concept-language①">language</a> specifies the primary language for the <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification③⑤">notification</a>’s <a data-link-type="dfn" href="#concept-title" id="ref-for-concept-title③">title</a>, <a data-link-type="dfn" href="#body" id="ref-for-body③">body</a> and the <a data-link-type="dfn" href="#concept-title" id="ref-for-concept-title④">title</a> of each of its <a data-link-type="dfn" href="#actions" id="ref-for-actions⑧">actions</a>. Its value is a string.
The empty string indicates that the primary language is unknown. Any other string must be
interpreted as a language tag. Validity or well-formedness are not enforced. <a data-link-type="biblio" href="#biblio-lang">[LANG]</a> </p>
   <p class="note" role="note">Developers are encouraged to only use valid language tags. </p>
   <h3 class="heading settled" data-level="2.5" id="resources"><span class="secno">2.5. </span><span class="content">Resources</span><a class="self-link" href="#resources"></a></h3>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="fetch-steps">fetch steps</dfn> for a given <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification③⑥">notification</a> <var>notification</var> are: </p>
   <ol>
    <li>
     <p>If the notification platform supports images, <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-fetch" id="ref-for-concept-fetch">fetch</a> <var>notification</var>’s <a data-link-type="dfn" href="#image-url" id="ref-for-image-url②">image URL</a>, if <a data-link-type="dfn" href="#image-url" id="ref-for-image-url③">image URL</a> is set. </p>
     <p class="note" role="note">The intent is to fetch this resource similar to an <a href="https://html.spec.whatwg.org/multipage/images.html#update-the-image-data"><code>&lt;img></code></a>,
  but this <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=24055">needs abstracting</a>. </p>
     <p>Then, <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel" id="ref-for-in-parallel">in parallel</a>: </p>
     <ol>
      <li>
       <p>Wait for the <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-response" id="ref-for-concept-response">response</a>. </p>
      <li>
       <p>If the <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-response" id="ref-for-concept-response①">response</a>’s <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-internal-response" id="ref-for-concept-internal-response">internal response</a>’s <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-response-type" id="ref-for-concept-response-type">type</a> is
   "<code>default</code>", then attempt to decode the resource as image. </p>
      <li>
       <p>If the image format is supported, set <var>notification</var>’s <a data-link-type="dfn" href="#image-resource" id="ref-for-image-resource③">image resource</a> to the decoded resource. (Otherwise <var>notification</var> has no <a data-link-type="dfn" href="#image-resource" id="ref-for-image-resource④">image resource</a>.) </p>
     </ol>
    <li>
     <p>If the notification platform supports icons, <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-fetch" id="ref-for-concept-fetch①">fetch</a> <var>notification</var>’s <a data-link-type="dfn" href="#icon-url" id="ref-for-icon-url②">icon URL</a>, if <a data-link-type="dfn" href="#icon-url" id="ref-for-icon-url③">icon URL</a> is set. </p>
     <p class="note" role="note">The intent is to fetch this resource similar to an <a href="https://html.spec.whatwg.org/multipage/images.html#update-the-image-data"><code>&lt;img></code></a>,
  but this <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=24055">needs abstracting</a>. </p>
     <p>Then, <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel" id="ref-for-in-parallel①">in parallel</a>: </p>
     <ol>
      <li>
       <p>Wait for the <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-response" id="ref-for-concept-response②">response</a>. </p>
      <li>
       <p>If the <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-response" id="ref-for-concept-response③">response</a>’s <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-internal-response" id="ref-for-concept-internal-response①">internal response</a>’s <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-response-type" id="ref-for-concept-response-type①">type</a> is
   "<code>default</code>", then attempt to decode the resource as image. </p>
      <li>
       <p>If the image format is supported, set <var>notification</var>’s <a data-link-type="dfn" href="#icon-resource" id="ref-for-icon-resource④">icon resource</a> to the decoded resource. (Otherwise <var>notification</var> has no <a data-link-type="dfn" href="#icon-resource" id="ref-for-icon-resource⑤">icon resource</a>.) </p>
     </ol>
    <li>
     <p>If the notification platform supports badges, <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-fetch" id="ref-for-concept-fetch②">fetch</a> <var>notification</var>’s <a data-link-type="dfn" href="#badge-url" id="ref-for-badge-url②">badge URL</a>, if <a data-link-type="dfn" href="#badge-url" id="ref-for-badge-url③">badge URL</a> is set. </p>
     <p class="note" role="note">The intent is to fetch this resource similar to an <a href="https://html.spec.whatwg.org/multipage/images.html#update-the-image-data"><code>&lt;img></code></a>,
  but this <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=24055">needs abstracting</a>. </p>
     <p>Then, <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel" id="ref-for-in-parallel②">in parallel</a>: </p>
     <ol>
      <li>
       <p>Wait for the <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-response" id="ref-for-concept-response④">response</a>. </p>
      <li>
       <p>If the <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-response" id="ref-for-concept-response⑤">response</a>’s <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-internal-response" id="ref-for-concept-internal-response②">internal response</a>’s <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-response-type" id="ref-for-concept-response-type②">type</a> is
   "<code>default</code>", then attempt to decode the resource as image. </p>
      <li>
       <p>If the image format is supported, set <var>notification</var>’s <a data-link-type="dfn" href="#badge-resource" id="ref-for-badge-resource③">badge resource</a> to the decoded resource. (Otherwise <var>notification</var> has no <a data-link-type="dfn" href="#badge-resource" id="ref-for-badge-resource④">badge resource</a>.) </p>
     </ol>
    <li>
     <p>If the notification platform supports actions and action icons, then for each <var>action</var> in <var>notification</var>’s list of <a data-link-type="dfn" href="#actions" id="ref-for-actions⑨">actions</a> <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-fetch" id="ref-for-concept-fetch③">fetch</a> <var>action</var>’s <a data-link-type="dfn" href="#action-icon-url" id="ref-for-action-icon-url②">icon URL</a>, if <a data-link-type="dfn" href="#action-icon-url" id="ref-for-action-icon-url③">icon URL</a> is set. </p>
     <p class="note" role="note">The intent is to fetch this resource similar to an <a href="https://html.spec.whatwg.org/multipage/images.html#update-the-image-data"><code>&lt;img></code></a>,
  but this <a href="https://www.w3.org/Bugs/Public/show_bug.cgi?id=24055">needs abstracting</a>. </p>
     <p>Then, <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel" id="ref-for-in-parallel③">in parallel</a>: </p>
     <ol>
      <li>
       <p>Wait for the <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-response" id="ref-for-concept-response⑥">response</a>. </p>
      <li>
       <p>If the <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-response" id="ref-for-concept-response⑦">response</a>’s <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-internal-response" id="ref-for-concept-internal-response③">internal response</a>’s <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-response-type" id="ref-for-concept-response-type③">type</a> is
   "<code>default</code>", then attempt to decode the resource as image. </p>
      <li>
       <p>If the image format is supported, set <var>action</var>’s <a data-link-type="dfn" href="#action-icon-resource" id="ref-for-action-icon-resource①">icon resource</a> to the decoded resource. (Otherwise <var>action</var> has no <a data-link-type="dfn" href="#action-icon-resource" id="ref-for-action-icon-resource②">icon resource</a>.) </p>
     </ol>
   </ol>
   <h3 class="heading settled" data-level="2.6" id="showing-a-notification"><span class="secno">2.6. </span><span class="content">Showing a notification</span><a class="self-link" href="#showing-a-notification"></a></h3>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="show-steps">show steps</dfn> for a given <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification③⑦">notification</a> <var>notification</var> are: </p>
   <ol>
    <li>
     <p>Wait for any <a data-link-type="dfn" href="https://fetch.spec.whatwg.org/#concept-fetch" id="ref-for-concept-fetch④">fetches</a> to complete and <var>notification</var>’s <a data-link-type="dfn" href="#image-resource" id="ref-for-image-resource⑤">image resource</a> <a data-link-type="dfn" href="#icon-resource" id="ref-for-icon-resource⑥">icon resource</a>, and <a data-link-type="dfn" href="#badge-resource" id="ref-for-badge-resource⑤">badge resource</a> to be set (if any), as well as the <a data-link-type="dfn" href="#action-icon-resource" id="ref-for-action-icon-resource③">icon resources</a> for the <var>notification</var>’s <a data-link-type="dfn" href="#actions" id="ref-for-actions①⓪">actions</a> (if any). </p>
    <li>
     <p>Let <var>shown</var> be false. </p>
    <li>
     <p>Let <var>oldNotification</var> be the <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification③⑧">notification</a> in the <a data-link-type="dfn" href="#list-of-notifications" id="ref-for-list-of-notifications①">list of notifications</a> whose <a data-link-type="dfn" href="#tag" id="ref-for-tag②">tag</a> is not the empty string and is <var>notification</var>’s <a data-link-type="dfn" href="#tag" id="ref-for-tag③">tag</a>, and whose <a data-link-type="dfn" href="#concept-origin" id="ref-for-concept-origin②">origin</a> is <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/origin.html#same-origin" id="ref-for-same-origin">same origin</a> with <var>notification</var>’s <a data-link-type="dfn" href="#concept-origin" id="ref-for-concept-origin③">origin</a>, if any, and null
 otherwise. </p>
    <li>
     <p>If <var>oldNotification</var> is non-null, then: </p>
     <ol>
      <li>
       <p><a data-link-type="dfn" href="#handle-close-events" id="ref-for-handle-close-events">Handle close events</a> with <var>oldNotification</var>. </p>
      <li>
       <p>If the notification platform supports replacement, then: </p>
       <ol>
        <li>
         <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-replace" id="ref-for-list-replace">Replace</a> <var>oldNotification</var> with <var>notification</var>, in the <a data-link-type="dfn" href="#list-of-notifications" id="ref-for-list-of-notifications②">list of notifications</a>. </p>
        <li>
         <p>Set <var>shown</var> to true. </p>
       </ol>
       <p class="note no-backref" role="note">Notification platforms are strongly encouraged to support native
    replacement as it leads to a better user experience. </p>
      <li>
       <p>Otherwise, <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-remove" id="ref-for-list-remove">remove</a> <var>oldNotification</var> from the <a data-link-type="dfn" href="#list-of-notifications" id="ref-for-list-of-notifications③">list of notifications</a>. </p>
     </ol>
    <li>
     <p>If <var>shown</var> is false, then: </p>
     <ol>
      <li>
       <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-append" id="ref-for-list-append">Append</a> <var>notification</var> to the <a data-link-type="dfn" href="#list-of-notifications" id="ref-for-list-of-notifications④">list of notifications</a>. </p>
      <li>
       <p>Display <var>notification</var> on the device (e.g., by calling the appropriate
   notification platform API). </p>
     </ol>
    <li>
     <p>If <var>shown</var> is false or <var>oldNotification</var> is non-null and <var>notification</var>’s <a data-link-type="dfn" href="#renotify-preference-flag" id="ref-for-renotify-preference-flag①">renotify preference flag</a> has been set, then run
 the <a data-link-type="dfn" href="#alert-steps" id="ref-for-alert-steps">alert steps</a> for <var>notification</var>. </p>
    <li>
     <p>If <var>notification</var> is a <a data-link-type="dfn" href="#non-persistent-notification" id="ref-for-non-persistent-notification②">non-persistent notification</a>, then <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task">queue a task</a> to <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-fire" id="ref-for-concept-event-fire">fire an event</a> named <code>show</code> on the <code class="idl"><a data-link-type="idl" href="#notification" id="ref-for-notification①">Notification</a></code> object representing <var>notification</var>. </p>
   </ol>
   <h3 class="heading settled" data-level="2.7" id="activating-a-notification"><span class="secno">2.7. </span><span class="content">Activating a notification</span><a class="self-link" href="#activating-a-notification"></a></h3>
   <p>When a <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification③⑨">notification</a> <var>notification</var>,
or one of its <a data-link-type="dfn" href="#actions" id="ref-for-actions①①">actions</a>, is activated by the user, assuming the underlying
notification platform supports activation, the user agent must (unless otherwise
specified) run these steps: </p>
   <ol>
    <li>
     <p>If <var>notification</var> is a <a data-link-type="dfn" href="#persistent-notification" id="ref-for-persistent-notification④">persistent notification</a>, then: </p>
     <ol>
      <li>
       <p>Let <var>action</var> be the empty string. </p>
      <li>
       <p>If one of <var>notification</var>’s <a data-link-type="dfn" href="#actions" id="ref-for-actions①②">actions</a> was activated by the
   user, then set <var>action</var> to that <a data-link-type="dfn" href="#actions" id="ref-for-actions①③">action</a>’s <a data-link-type="dfn" href="#action-name" id="ref-for-action-name①">name</a>. </p>
      <li><a data-link-type="dfn" href="#fire-a-service-worker-notification-event" id="ref-for-fire-a-service-worker-notification-event">Fire a service worker notification event</a> named "<code>notificationclick</code>" given <var>notification</var> and <var>action</var>. 
     </ol>
    <li>
     <p>Otherwise, <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task①">queue a task</a> to run these steps: </p>
     <ol>
      <li>
       <p>Let <var>intoFocus</var> be the result of <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-fire" id="ref-for-concept-event-fire①">firing an event</a> named <code>click</code> on the <code class="idl"><a data-link-type="idl" href="#notification" id="ref-for-notification②">Notification</a></code> object representing <var>notification</var>, with its <code class="idl"><a data-link-type="idl" href="https://dom.spec.whatwg.org/#dom-event-cancelable" id="ref-for-dom-event-cancelable">cancelable</a></code> attribute initialized to true. </p>
       <p class="note" role="note">User agents are encouraged to make <code class="idl"><a data-link-type="idl" href="https://html.spec.whatwg.org/multipage/interaction.html#dom-window-focus" id="ref-for-dom-window-focus">focus()</a></code> work from within the event
    listener for the event named <code>click</code>. </p>
      <li>
       <p>If <var>intoFocus</var> is true, then the user agent should bring the <var>notification</var>’s related <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context" id="ref-for-browsing-context">browsing context</a>’s viewport into focus. </p>
     </ol>
   </ol>
   <p class="note" role="note">Throughout the web platform "activate" is intentionally misnamed as "click". </p>
   <h3 class="heading settled" data-level="2.8" id="closing-a-notification"><span class="secno">2.8. </span><span class="content">Closing a notification</span><a class="self-link" href="#closing-a-notification"></a></h3>
   <p>When a <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification④⓪">notification</a> is closed, either by the
underlying notification platform or by the user, the <a data-link-type="dfn" href="#close-steps" id="ref-for-close-steps①">close steps</a> for it
must be run. </p>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="close-steps">close steps</dfn> for a given <var>notification</var> are: </p>
   <ol>
    <li>
     <p>If the <a data-link-type="dfn" href="#list-of-notifications" id="ref-for-list-of-notifications⑤">list of notifications</a> does not <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-contain" id="ref-for-list-contain">contain</a> <var>notification</var>, then abort these steps. </p>
    <li>
     <p><a data-link-type="dfn" href="#handle-close-events" id="ref-for-handle-close-events①">Handle close events</a> with <var>notification</var>. </p>
    <li>
     <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-remove" id="ref-for-list-remove①">Remove</a> <var>notification</var> from the <a data-link-type="dfn" href="#list-of-notifications" id="ref-for-list-of-notifications⑥">list of notifications</a>. </p>
   </ol>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="handle-close-events">handle close events</dfn> given a <var>notification</var>, run these steps: </p>
   <ol>
    <li>
     <p>If <var>notification</var> is a <a data-link-type="dfn" href="#persistent-notification" id="ref-for-persistent-notification⑤">persistent notification</a> and <var>notification</var> was closed by the user, then <a data-link-type="dfn" href="#fire-a-service-worker-notification-event" id="ref-for-fire-a-service-worker-notification-event①">fire a service worker notification event</a> named
 "<code>notificationclose</code>" given <var>notification</var>. </p>
    <li>
     <p>If <var>notification</var> is a <a data-link-type="dfn" href="#non-persistent-notification" id="ref-for-non-persistent-notification③">non-persistent notification</a>, then <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task②">queue a task</a> to <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-fire" id="ref-for-concept-event-fire②">fire an event</a> named <code>close</code> on the <code class="idl"><a data-link-type="idl" href="#notification" id="ref-for-notification③">Notification</a></code> object representing <var>notification</var>. </p>
   </ol>
   <h3 class="heading settled" data-level="2.9" id="alerting-the-user"><span class="secno">2.9. </span><span class="content">Alerting the user</span><a class="self-link" href="#alerting-the-user"></a></h3>
   <p>The <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="alert-steps">alert steps</dfn> for alerting the user about a given <var>notification</var> are: </p>
   <ol>
    <li>
     <p><a data-link-type="dfn" href="https://w3c.github.io/vibration/#dfn-perform-vibration" id="ref-for-dfn-perform-vibration">Perform vibration</a> using <var>notification</var>’s <a data-link-type="dfn" href="#vibration-pattern" id="ref-for-vibration-pattern③">vibration pattern</a>, if any. </p>
   </ol>
   <h2 class="heading settled" data-level="3" id="api"><span class="secno">3. </span><span class="content">API</span><a class="self-link" href="#api"></a></h2>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed"><c- g>Exposed</c-></a>=(<c- n>Window</c->,<c- n>Worker</c->)]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="notification"><code><c- g>Notification</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#eventtarget" id="ref-for-eventtarget"><c- n>EventTarget</c-></a> {
  <a class="idl-code" data-link-type="constructor" href="#dom-notification-notification" id="ref-for-dom-notification-notification"><c- g>constructor</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="Notification/Notification(title, options), Notification/constructor(title, options), Notification/Notification(title), Notification/constructor(title)" data-dfn-type="argument" data-export id="dom-notification-notification-title-options-title"><code><c- g>title</c-></code><a class="self-link" href="#dom-notification-notification-title-options-title"></a></dfn>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-notificationoptions" id="ref-for-dictdef-notificationoptions"><c- n>NotificationOptions</c-></a> <dfn class="idl-code" data-dfn-for="Notification/Notification(title, options), Notification/constructor(title, options), Notification/Notification(title), Notification/constructor(title)" data-dfn-type="argument" data-export id="dom-notification-notification-title-options-options"><code><c- g>options</c-></code><a class="self-link" href="#dom-notification-notification-title-options-options"></a></dfn> = {});

  <c- b>static</c-> <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-notificationpermission" id="ref-for-enumdef-notificationpermission"><c- n>NotificationPermission</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="NotificationPermission" href="#dom-notification-permission" id="ref-for-dom-notification-permission"><c- g>permission</c-></a>;
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>static</c-> <c- b>Promise</c->&lt;<a class="n" data-link-type="idl-name" href="#enumdef-notificationpermission" id="ref-for-enumdef-notificationpermission①"><c- n>NotificationPermission</c-></a>> <a class="idl-code" data-link-type="method" href="#dom-notification-requestpermission" id="ref-for-dom-notification-requestpermission"><c- g>requestPermission</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#callbackdef-notificationpermissioncallback" id="ref-for-callbackdef-notificationpermissioncallback"><c- n>NotificationPermissionCallback</c-></a> <dfn class="idl-code" data-dfn-for="Notification/requestPermission(deprecatedCallback), Notification/requestPermission()" data-dfn-type="argument" data-export id="dom-notification-requestpermission-deprecatedcallback-deprecatedcallback"><code><c- g>deprecatedCallback</c-></code><a class="self-link" href="#dom-notification-requestpermission-deprecatedcallback-deprecatedcallback"></a></dfn>);

  <c- b>static</c-> <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unsigned long" href="#dom-notification-maxactions" id="ref-for-dom-notification-maxactions"><c- g>maxActions</c-></a>;

  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-notification-onclick" id="ref-for-dom-notification-onclick"><c- g>onclick</c-></a>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler①"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-notification-onshow" id="ref-for-dom-notification-onshow"><c- g>onshow</c-></a>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler②"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-notification-onerror" id="ref-for-dom-notification-onerror"><c- g>onerror</c-></a>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler③"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-notification-onclose" id="ref-for-dom-notification-onclose"><c- g>onclose</c-></a>;

  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMString" href="#dom-notification-title" id="ref-for-dom-notification-title"><c- g>title</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-notificationdirection" id="ref-for-enumdef-notificationdirection"><c- n>NotificationDirection</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="NotificationDirection" href="#dom-notification-dir" id="ref-for-dom-notification-dir"><c- g>dir</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMString" href="#dom-notification-lang" id="ref-for-dom-notification-lang"><c- g>lang</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString③"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMString" href="#dom-notification-body" id="ref-for-dom-notification-body"><c- g>body</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString④"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMString" href="#dom-notification-tag" id="ref-for-dom-notification-tag"><c- g>tag</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString"><c- b>USVString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="USVString" href="#dom-notification-image" id="ref-for-dom-notification-image"><c- g>image</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString①"><c- b>USVString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="USVString" href="#dom-notification-icon" id="ref-for-dom-notification-icon"><c- g>icon</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString②"><c- b>USVString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="USVString" href="#dom-notification-badge" id="ref-for-dom-notification-badge"><c- g>badge</c-></a>;
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long①"><c- b>unsigned</c-> <c- b>long</c-></a>> <a class="idl-code" data-link-type="attribute" data-readonly data-type="FrozenArray<unsigned long>" href="#dom-notification-vibrate" id="ref-for-dom-notification-vibrate"><c- g>vibrate</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://heycam.github.io/webidl/#DOMTimeStamp" id="ref-for-DOMTimeStamp①"><c- n>DOMTimeStamp</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMTimeStamp" href="#dom-notification-timestamp" id="ref-for-dom-notification-timestamp"><c- g>timestamp</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-notification-renotify" id="ref-for-dom-notification-renotify"><c- g>renotify</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean①"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-notification-silent" id="ref-for-dom-notification-silent"><c- g>silent</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean②"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-notification-requireinteraction" id="ref-for-dom-notification-requireinteraction"><c- g>requireInteraction</c-></a>;
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject①"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <c- b>any</c-> <a class="idl-code" data-link-type="attribute" data-readonly data-type="any" href="#dom-notification-data" id="ref-for-dom-notification-data"><c- g>data</c-></a>;
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject②"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#dictdef-notificationaction" id="ref-for-dictdef-notificationaction"><c- n>NotificationAction</c-></a>> <a class="idl-code" data-link-type="attribute" data-readonly data-type="FrozenArray<NotificationAction>" href="#dom-notification-actions" id="ref-for-dom-notification-actions"><c- g>actions</c-></a>;

  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-notification-close" id="ref-for-dom-notification-close①"><c- g>close</c-></a>();
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-notificationoptions"><code><c- g>NotificationOptions</c-></code></dfn> {
  <a class="n" data-link-type="idl-name" href="#enumdef-notificationdirection" id="ref-for-enumdef-notificationdirection①"><c- n>NotificationDirection</c-></a> <dfn class="idl-code" data-default="&quot;auto&quot;" data-dfn-for="NotificationOptions" data-dfn-type="dict-member" data-export data-type="NotificationDirection " id="dom-notificationoptions-dir"><code><c- g>dir</c-></code><a class="self-link" href="#dom-notificationoptions-dir"></a></dfn> = "auto";
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑤"><c- b>DOMString</c-></a> <dfn class="idl-code" data-default="&quot;&quot;" data-dfn-for="NotificationOptions" data-dfn-type="dict-member" data-export data-type="DOMString " id="dom-notificationoptions-lang"><code><c- g>lang</c-></code><a class="self-link" href="#dom-notificationoptions-lang"></a></dfn> = "";
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑥"><c- b>DOMString</c-></a> <dfn class="idl-code" data-default="&quot;&quot;" data-dfn-for="NotificationOptions" data-dfn-type="dict-member" data-export data-type="DOMString " id="dom-notificationoptions-body"><code><c- g>body</c-></code><a class="self-link" href="#dom-notificationoptions-body"></a></dfn> = "";
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑦"><c- b>DOMString</c-></a> <dfn class="idl-code" data-default="&quot;&quot;" data-dfn-for="NotificationOptions" data-dfn-type="dict-member" data-export data-type="DOMString " id="dom-notificationoptions-tag"><code><c- g>tag</c-></code><a class="self-link" href="#dom-notificationoptions-tag"></a></dfn> = "";
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString③"><c- b>USVString</c-></a> <dfn class="idl-code" data-dfn-for="NotificationOptions" data-dfn-type="dict-member" data-export data-type="USVString " id="dom-notificationoptions-image"><code><c- g>image</c-></code><a class="self-link" href="#dom-notificationoptions-image"></a></dfn>;
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString④"><c- b>USVString</c-></a> <dfn class="idl-code" data-dfn-for="NotificationOptions" data-dfn-type="dict-member" data-export data-type="USVString " id="dom-notificationoptions-icon"><code><c- g>icon</c-></code><a class="self-link" href="#dom-notificationoptions-icon"></a></dfn>;
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString⑤"><c- b>USVString</c-></a> <dfn class="idl-code" data-dfn-for="NotificationOptions" data-dfn-type="dict-member" data-export data-type="USVString " id="dom-notificationoptions-badge"><code><c- g>badge</c-></code><a class="self-link" href="#dom-notificationoptions-badge"></a></dfn>;
  <a class="n" data-link-type="idl-name" href="https://w3c.github.io/vibration/#idl-def-vibratepattern" id="ref-for-idl-def-vibratepattern"><c- n>VibratePattern</c-></a> <dfn class="idl-code" data-dfn-for="NotificationOptions" data-dfn-type="dict-member" data-export data-type="VibratePattern " id="dom-notificationoptions-vibrate"><code><c- g>vibrate</c-></code><a class="self-link" href="#dom-notificationoptions-vibrate"></a></dfn>;
  <a class="n" data-link-type="idl-name" href="https://heycam.github.io/webidl/#DOMTimeStamp" id="ref-for-DOMTimeStamp②"><c- n>DOMTimeStamp</c-></a> <dfn class="idl-code" data-dfn-for="NotificationOptions" data-dfn-type="dict-member" data-export data-type="DOMTimeStamp " id="dom-notificationoptions-timestamp"><code><c- g>timestamp</c-></code><a class="self-link" href="#dom-notificationoptions-timestamp"></a></dfn>;
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean③"><c- b>boolean</c-></a> <dfn class="idl-code" data-default="false" data-dfn-for="NotificationOptions" data-dfn-type="dict-member" data-export data-type="boolean " id="dom-notificationoptions-renotify"><code><c- g>renotify</c-></code><a class="self-link" href="#dom-notificationoptions-renotify"></a></dfn> = <c- b>false</c->;
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean④"><c- b>boolean</c-></a> <dfn class="idl-code" data-default="false" data-dfn-for="NotificationOptions" data-dfn-type="dict-member" data-export data-type="boolean " id="dom-notificationoptions-silent"><code><c- g>silent</c-></code><a class="self-link" href="#dom-notificationoptions-silent"></a></dfn> = <c- b>false</c->;
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean⑤"><c- b>boolean</c-></a> <dfn class="idl-code" data-default="false" data-dfn-for="NotificationOptions" data-dfn-type="dict-member" data-export data-type="boolean " id="dom-notificationoptions-requireinteraction"><code><c- g>requireInteraction</c-></code><a class="self-link" href="#dom-notificationoptions-requireinteraction"></a></dfn> = <c- b>false</c->;
  <c- b>any</c-> <dfn class="idl-code" data-default="null" data-dfn-for="NotificationOptions" data-dfn-type="dict-member" data-export data-type="any " id="dom-notificationoptions-data"><code><c- g>data</c-></code><a class="self-link" href="#dom-notificationoptions-data"></a></dfn> = <c- b>null</c->;
  <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#dictdef-notificationaction" id="ref-for-dictdef-notificationaction①"><c- n>NotificationAction</c-></a>> <dfn class="idl-code" data-default="[]" data-dfn-for="NotificationOptions" data-dfn-type="dict-member" data-export data-type="sequence<NotificationAction> " id="dom-notificationoptions-actions"><code><c- g>actions</c-></code><a class="self-link" href="#dom-notificationoptions-actions"></a></dfn> = [];
};

<c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-notificationpermission"><code><c- g>NotificationPermission</c-></code></dfn> {
  <dfn class="idl-code" data-dfn-for="NotificationPermission" data-dfn-type="enum-value" data-export id="dom-notificationpermission-default"><code><c- s>"default"</c-></code><a class="self-link" href="#dom-notificationpermission-default"></a></dfn>,
  <dfn class="idl-code" data-dfn-for="NotificationPermission" data-dfn-type="enum-value" data-export id="dom-notificationpermission-denied"><code><c- s>"denied"</c-></code><a class="self-link" href="#dom-notificationpermission-denied"></a></dfn>,
  <dfn class="idl-code" data-dfn-for="NotificationPermission" data-dfn-type="enum-value" data-export id="dom-notificationpermission-granted"><code><c- s>"granted"</c-></code><a class="self-link" href="#dom-notificationpermission-granted"></a></dfn>
};

<c- b>enum</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="enum" data-export id="enumdef-notificationdirection"><code><c- g>NotificationDirection</c-></code></dfn> {
  <dfn class="idl-code" data-dfn-for="NotificationDirection" data-dfn-type="enum-value" data-export id="dom-notificationdirection-auto"><code><c- s>"auto"</c-></code><a class="self-link" href="#dom-notificationdirection-auto"></a></dfn>,
  <dfn class="idl-code" data-dfn-for="NotificationDirection" data-dfn-type="enum-value" data-export id="dom-notificationdirection-ltr"><code><c- s>"ltr"</c-></code><a class="self-link" href="#dom-notificationdirection-ltr"></a></dfn>,
  <dfn class="idl-code" data-dfn-for="NotificationDirection" data-dfn-type="enum-value" data-export id="dom-notificationdirection-rtl"><code><c- s>"rtl"</c-></code><a class="self-link" href="#dom-notificationdirection-rtl"></a></dfn>
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-notificationaction"><code><c- g>NotificationAction</c-></code></dfn> {
  <c- b>required</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑧"><c- b>DOMString</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="NotificationAction" data-dfn-type="dict-member" data-export data-type="DOMString " id="dom-notificationaction-action"><code><c- g>action</c-></code></dfn>;
  <c- b>required</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑨"><c- b>DOMString</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="NotificationAction" data-dfn-type="dict-member" data-export data-type="DOMString " id="dom-notificationaction-title"><code><c- g>title</c-></code></dfn>;
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString⑥"><c- b>USVString</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="NotificationAction" data-dfn-type="dict-member" data-export data-type="USVString " id="dom-notificationaction-icon"><code><c- g>icon</c-></code></dfn>;
};

<c- b>callback</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="callback" data-export id="callbackdef-notificationpermissioncallback"><code><c- g>NotificationPermissionCallback</c-></code></dfn> = <c- b>void</c-> (<a class="n" data-link-type="idl-name" href="#enumdef-notificationpermission" id="ref-for-enumdef-notificationpermission②"><c- n>NotificationPermission</c-></a> <dfn class="idl-code" data-dfn-for="NotificationPermissionCallback" data-dfn-type="argument" data-export id="dom-notificationpermissioncallback-permission"><code><c- g>permission</c-></code><a class="self-link" href="#dom-notificationpermissioncallback-permission"></a></dfn>);
</pre>
   <p>A <a data-link-type="dfn" href="#non-persistent-notification" id="ref-for-non-persistent-notification④">non-persistent notification</a> is represented by one <code class="idl"><a data-link-type="idl" href="#notification" id="ref-for-notification④">Notification</a></code> object and can be created through <code class="idl"><a data-link-type="idl" href="#notification" id="ref-for-notification⑤">Notification</a></code>'s <a class="idl-code" data-link-type="constructor" href="#dom-notification-notification" id="ref-for-dom-notification-notification①">constructor</a>. </p>
   <p>A <a data-link-type="dfn" href="#persistent-notification" id="ref-for-persistent-notification⑥">persistent notification</a> is represented by zero or more <code class="idl"><a data-link-type="idl" href="#notification" id="ref-for-notification⑥">Notification</a></code> objects and can be created through the <code class="idl"><a data-link-type="idl" href="#dom-serviceworkerregistration-shownotification" id="ref-for-dom-serviceworkerregistration-shownotification">showNotification()</a></code> method. </p>
   <h3 class="heading settled" data-level="3.1" id="garbage-collection"><span class="secno">3.1. </span><span class="content">Garbage collection</span><a class="self-link" href="#garbage-collection"></a></h3>
   <p>A <code class="idl"><a data-link-type="idl" href="#notification" id="ref-for-notification⑦">Notification</a></code> object must not be garbage collected while the <a data-link-type="dfn" href="#list-of-notifications" id="ref-for-list-of-notifications⑦">list of notifications</a> <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-contain" id="ref-for-list-contain①">contains</a> its corresponding <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification④①">notification</a> and it has an <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-listener" id="ref-for-concept-event-listener">event listener</a> whose <b>type</b> is <code>click</code>, <code>show</code>, <code>close</code>, or <code>error</code>. </p>
   <h3 class="heading settled" data-level="3.2" id="constructors"><span class="secno">3.2. </span><span class="content">Constructors</span><a class="self-link" href="#constructors"></a></h3>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="Notification" data-dfn-type="constructor" data-export data-lt="Notification(title, options)|constructor(title, options)|Notification(title)|constructor(title)" id="dom-notification-notification"><code>Notification(title, options)</code></dfn> constructor, when invoked, must run these steps: </p>
   <ol>
    <li>
     <p>If the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object" id="ref-for-current-global-object">current global object</a> is a <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/ServiceWorker/#serviceworkerglobalscope" id="ref-for-serviceworkerglobalscope">ServiceWorkerGlobalScope</a></code> object, then <a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-throw" id="ref-for-dfn-throw③">throw</a> a <code>TypeError</code> exception. </p>
    <li>
     <p>Let <var>notification</var> be the result of <a data-link-type="dfn" href="#create-a-notification" id="ref-for-create-a-notification">creating a notification</a> given <var>title</var> and <var>options</var>. Rethrow any exceptions. </p>
    <li>
     <p>Let <var>n</var> be a new <code class="idl"><a data-link-type="idl" href="#notification" id="ref-for-notification⑧">Notification</a></code> object associated with <var>notification</var>. </p>
    <li>
     <p>Run these steps <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel" id="ref-for-in-parallel④">in parallel</a>: </p>
     <ol>
      <li>
       <p>If <a data-link-type="dfn" href="#permission" id="ref-for-permission②">permission</a> for <var>notification</var>’s <a data-link-type="dfn" href="#concept-origin" id="ref-for-concept-origin④">origin</a> is not
    "<code>granted</code>", then <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task③">queue a task</a> to <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#concept-event-fire" id="ref-for-concept-event-fire③">fire an event</a> named <code>error</code> on <var>n</var>, and abort these steps. </p>
      <li>
       <p>Run the <a data-link-type="dfn" href="#fetch-steps" id="ref-for-fetch-steps">fetch steps</a> for <var>notification</var>. </p>
      <li>
       <p>Run the <a data-link-type="dfn" href="#show-steps" id="ref-for-show-steps①">show steps</a> for <var>notification</var>. </p>
     </ol>
    <li>
     <p>Return <var>n</var>. </p>
   </ol>
   <h3 class="heading settled" data-level="3.3" id="static-members"><span class="secno">3.3. </span><span class="content">Static members</span><a class="self-link" href="#static-members"></a></h3>
   <p>The static <dfn class="dfn-paneled idl-code" data-dfn-for="Notification" data-dfn-type="attribute" data-export id="dom-notification-permission"><code>permission</code></dfn> attribute’s getter must return <a data-link-type="dfn" href="#permission" id="ref-for-permission③">permission</a> for the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#entry-settings-object" id="ref-for-entry-settings-object②">entry settings object</a>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin" id="ref-for-concept-settings-object-origin①">origin</a>. </p>
   <p class="note" role="note">If you edit standards please refrain from copying the above. Synchronous
permissions are like synchronous IO, a bad idea. </p>
   <p>The static <dfn class="dfn-paneled idl-code" data-dfn-for="Notification" data-dfn-type="method" data-export data-lt="requestPermission(deprecatedCallback)|requestPermission()" id="dom-notification-requestpermission"><code>requestPermission(<var>deprecatedCallback</var>)</code></dfn> method, when invoked, must run these steps: </p>
   <ol>
    <li>
     <p>Let <var>promise</var> be a new promise. </p>
    <li>
     <p>Run these steps <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel" id="ref-for-in-parallel⑤">in parallel</a>: </p>
     <ol>
      <li>
       <p>Let <var>permission</var> be <a data-link-type="dfn" href="#permission" id="ref-for-permission④">permission</a> for <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#entry-settings-object" id="ref-for-entry-settings-object③">entry settings object</a>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin" id="ref-for-concept-settings-object-origin②">origin</a>. </p>
      <li>
       <p>If <var>permission</var> is "<code>default</code>", ask the user whether showing
   notifications for the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#entry-settings-object" id="ref-for-entry-settings-object④">entry settings object</a>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin" id="ref-for-concept-settings-object-origin③">origin</a> is acceptable. If it is, set <var>permission</var> to "<code>granted</code>", and "<code>denied</code>" otherwise. </p>
      <li>
       <p><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task" id="ref-for-queue-a-task④">Queue a task</a> to run these steps: </p>
       <ol>
        <li>
         <p>Set <a data-link-type="dfn" href="#permission" id="ref-for-permission⑤">permission</a> for the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#entry-settings-object" id="ref-for-entry-settings-object⑤">entry settings object</a>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin" id="ref-for-concept-settings-object-origin④">origin</a> to <var>permission</var>. </p>
        <li>
         <p>If <var>deprecatedCallback</var> is given, invoke <var>deprecatedCallback</var> with <var>permission</var> as single argument. If this
     throws an exception, <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#report-the-exception" id="ref-for-report-the-exception">report the exception</a>. </p>
        <li>
         <p>Fullfil <var>promise</var> with <var>permission</var>. </p>
       </ol>
     </ol>
    <li>
     <p>Return <var>promise</var>. </p>
   </ol>
   <p class="warning">Notifications are the one instance thus far where asking the
user upfront makes sense. Specifications for other APIs should not use this
pattern and instead employ one of the <a href="http://robert.ocallahan.org/2011/06/permissions-for-web-applications_30.html"> many more suitable alternatives</a>. </p>
   <p>The static <dfn class="dfn-paneled idl-code" data-dfn-for="Notification" data-dfn-type="attribute" data-export id="dom-notification-maxactions"><code>maxActions</code></dfn> attribute’s getter must return the <a data-link-type="dfn" href="#maximum-number-of-actions" id="ref-for-maximum-number-of-actions①">maximum number of actions</a> supported. </p>
   <h3 class="heading settled" data-level="3.4" id="object-members"><span class="secno">3.4. </span><span class="content">Object members</span><a class="self-link" href="#object-members"></a></h3>
   <p>The following are the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handlers" id="ref-for-event-handlers">event handlers</a> (and their corresponding <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-event-type" id="ref-for-event-handler-event-type">event handler event types</a>) that must be supported as attributes by the <code class="idl"><a data-link-type="idl" href="#notification" id="ref-for-notification⑨">Notification</a></code> object. </p>
   <table>
    <thead>
     <tr>
      <th><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handlers" id="ref-for-event-handlers①">event handler</a> 
      <th><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-event-type" id="ref-for-event-handler-event-type①">event handler event type</a> 
    <tbody>
     <tr>
      <td><dfn class="dfn-paneled idl-code" data-dfn-for="Notification" data-dfn-type="attribute" data-export id="dom-notification-onclick"><code>onclick</code></dfn> 
      <td><code>click</code> 
     <tr>
      <td><dfn class="dfn-paneled idl-code" data-dfn-for="Notification" data-dfn-type="attribute" data-export id="dom-notification-onshow"><code>onshow</code></dfn> 
      <td><code>show</code> 
     <tr>
      <td><dfn class="dfn-paneled idl-code" data-dfn-for="Notification" data-dfn-type="attribute" data-export id="dom-notification-onerror"><code>onerror</code></dfn> 
      <td><code>error</code> 
     <tr>
      <td><dfn class="dfn-paneled idl-code" data-dfn-for="Notification" data-dfn-type="attribute" data-export id="dom-notification-onclose"><code>onclose</code></dfn> 
      <td><code>close</code> 
   </table>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="Notification" data-dfn-type="method" data-export id="dom-notification-close"><code>close()</code></dfn> method, when
invoked, must run the <a data-link-type="dfn" href="#close-steps" id="ref-for-close-steps②">close steps</a> for the <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification④②">notification</a>. </p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="Notification" data-dfn-type="attribute" data-export id="dom-notification-title"><code>title</code></dfn> attribute’s getter must return the <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification④③">notification</a>’s <a data-link-type="dfn" href="#concept-title" id="ref-for-concept-title⑤">title</a>. </p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="Notification" data-dfn-type="attribute" data-export id="dom-notification-dir"><code>dir</code></dfn> attribute’s getter must return the <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification④④">notification</a>’s <a data-link-type="dfn" href="#concept-direction" id="ref-for-concept-direction③">direction</a>. </p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="Notification" data-dfn-type="attribute" data-export id="dom-notification-lang"><code>lang</code></dfn> attribute’s getter must return the <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification④⑤">notification</a>’s <a data-link-type="dfn" href="#concept-language" id="ref-for-concept-language②">language</a>. </p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="Notification" data-dfn-type="attribute" data-export id="dom-notification-body"><code>body</code></dfn> attribute’s getter must return the <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification④⑥">notification</a>’s <a data-link-type="dfn" href="#body" id="ref-for-body④">body</a>. </p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="Notification" data-dfn-type="attribute" data-export id="dom-notification-tag"><code>tag</code></dfn> attribute’s getter must return the <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification④⑦">notification</a>’s <a data-link-type="dfn" href="#tag" id="ref-for-tag④">tag</a>. </p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="Notification" data-dfn-type="attribute" data-export id="dom-notification-image"><code>image</code></dfn> attribute’s getter must return
the <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification④⑧">notification</a>’s <a data-link-type="dfn" href="#image-url" id="ref-for-image-url④">image URL</a>, <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url-serializer" id="ref-for-concept-url-serializer">serialized</a>,
and the empty string if there is no <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification④⑨">notification</a>’s <a data-link-type="dfn" href="#image-url" id="ref-for-image-url⑤">image URL</a> otherwise. </p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="Notification" data-dfn-type="attribute" data-export id="dom-notification-icon"><code>icon</code></dfn> attribute’s getter must return the <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification⑤⓪">notification</a>’s <a data-link-type="dfn" href="#icon-url" id="ref-for-icon-url④">icon URL</a>, <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url-serializer" id="ref-for-concept-url-serializer①">serialized</a>, and
the empty string if there is no <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification⑤①">notification</a>’s <a data-link-type="dfn" href="#icon-url" id="ref-for-icon-url⑤">icon URL</a> otherwise. </p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="Notification" data-dfn-type="attribute" data-export id="dom-notification-badge"><code>badge</code></dfn> attribute’s getter must return the <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification⑤②">notification</a>’s <a data-link-type="dfn" href="#badge-url" id="ref-for-badge-url④">badge URL</a>, <a data-link-type="dfn" href="https://url.spec.whatwg.org/#concept-url-serializer" id="ref-for-concept-url-serializer②">serialized</a>, and
the empty string if there is no <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification⑤③">notification</a>’s <a data-link-type="dfn" href="#badge-url" id="ref-for-badge-url⑤">badge URL</a> otherwise. </p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="Notification" data-dfn-type="attribute" data-export id="dom-notification-vibrate"><code>vibrate</code></dfn> attribute’s getter must return the <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification⑤④">notification</a>’s <a data-link-type="dfn" href="#vibration-pattern" id="ref-for-vibration-pattern④">vibration pattern</a>, if any, and the empty list
otherwise. </p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="Notification" data-dfn-type="attribute" data-export id="dom-notification-timestamp"><code>timestamp</code></dfn> attribute’s getter must return
the <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification⑤⑤">notification</a>’s <a data-link-type="dfn" href="#timestamp" id="ref-for-timestamp②">timestamp</a>. </p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="Notification" data-dfn-type="attribute" data-export id="dom-notification-renotify"><code>renotify</code></dfn> attribute’s getter must return
the <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification⑤⑥">notification</a>’s <a data-link-type="dfn" href="#renotify-preference-flag" id="ref-for-renotify-preference-flag②">renotify preference flag</a>. </p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="Notification" data-dfn-type="attribute" data-export id="dom-notification-silent"><code>silent</code></dfn> attribute’s getter must return the <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification⑤⑦">notification</a>’s <a data-link-type="dfn" href="#silent-preference-flag" id="ref-for-silent-preference-flag①">silent preference flag</a>. </p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="Notification" data-dfn-type="attribute" data-export id="dom-notification-requireinteraction"><code>requireInteraction</code></dfn> attribute’s getter must
return the <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification⑤⑧">notification</a>’s <a data-link-type="dfn" href="#require-interaction-preference-flag" id="ref-for-require-interaction-preference-flag①">require interaction preference flag</a>. </p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="Notification" data-dfn-type="attribute" data-export id="dom-notification-data"><code>data</code></dfn> attribute’s getter must return <a data-link-type="abstract-op" href="https://html.spec.whatwg.org/multipage/structured-data.html#structureddeserialize" id="ref-for-structureddeserialize">StructuredDeserialize</a>(<a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification⑤⑨">notification</a>’s <a data-link-type="dfn" href="#data" id="ref-for-data①">data</a>, <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#context-object" id="ref-for-context-object">context object</a>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm" id="ref-for-concept-relevant-realm">relevant Realm</a>). If this throws an exception, then return null. </p>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="Notification" data-dfn-type="attribute" data-export id="dom-notification-actions"><code>actions</code></dfn> attribute’s getter must return the
result of the following steps: </p>
   <ol>
    <li>
     <p>Let <var>frozenActions</var> be an empty list of type <code class="idl"><a data-link-type="idl" href="#dictdef-notificationaction" id="ref-for-dictdef-notificationaction②">NotificationAction</a></code>. </p>
    <li>
     <p>For each <var>entry</var> in the <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification⑥⓪">notification</a>’s list of <a data-link-type="dfn" href="#actions" id="ref-for-actions①④">actions</a>, perform the following steps: </p>
     <ol>
      <li>
       <p>Let <var>action</var> be a new <code class="idl"><a data-link-type="idl" href="#dictdef-notificationaction" id="ref-for-dictdef-notificationaction③">NotificationAction</a></code>. </p>
      <li>
       <p>Set <var>action</var>’s <code class="idl"><a data-link-type="idl" href="#dom-notificationaction-action" id="ref-for-dom-notificationaction-action">action</a></code> to <var>entry</var>’s <a data-link-type="dfn" href="#action-name" id="ref-for-action-name②">name</a>. </p>
      <li>
       <p>Set <var>action</var>’s <code class="idl"><a data-link-type="idl" href="#dom-notificationaction-title" id="ref-for-dom-notificationaction-title">title</a></code> to <var>entry</var>’s <a data-link-type="dfn" href="#action-title" id="ref-for-action-title③">title</a>. </p>
      <li>
       <p>Set <var>action</var>’s <code class="idl"><a data-link-type="idl" href="#dom-notificationaction-icon" id="ref-for-dom-notificationaction-icon">icon</a></code> to <var>entry</var>’s <a data-link-type="dfn" href="#action-icon-url" id="ref-for-action-icon-url④">icon URL</a>. </p>
      <li>
       <p>Call <a data-link-type="dfn" href="https://tc39.github.io/ecma262/#sec-object.freeze" id="ref-for-sec-object.freeze">Object.freeze</a> on <var>action</var>, to
    prevent accidental mutation by scripts. </p>
      <li>
       <p>Append <var>action</var> to <var>frozenActions</var>. </p>
     </ol>
    <li>
     <p><a data-link-type="dfn" href="https://heycam.github.io/webidl/#dfn-create-frozen-array" id="ref-for-dfn-create-frozen-array">Create a frozen array</a> from <var>frozenActions</var>. </p>
   </ol>
   <h3 class="heading settled" data-level="3.5" id="examples"><span class="secno">3.5. </span><span class="content">Examples</span><a class="self-link" href="#examples"></a></h3>
   <h4 class="heading settled" data-level="3.5.1" id="using-events"><span class="secno">3.5.1. </span><span class="content">Using events from a page</span><a class="self-link" href="#using-events"></a></h4>
   <p><a data-link-type="dfn" href="#non-persistent-notification" id="ref-for-non-persistent-notification⑤">Non-persistent</a> <code class="idl"><a data-link-type="idl" href="#notification" id="ref-for-notification①⓪">Notification</a></code> objects dispatch events during their lifecycle, which developers can use to
generate desired behaviors. </p>
   <p>The <code>click</code> event dispatches when the user activates a
notification. </p>
<pre class="example" id="example-08e8ecea"><a class="self-link" href="#example-08e8ecea"></a>var not = new Notification("Gebrünn Gebrünn by Paul Kalkbrenner", { icon: "newsong.svg", tag: "song" });
not.onclick = function() { displaySong(this); };</pre>
   <h4 class="heading settled" data-level="3.5.2" id="using-actions"><span class="secno">3.5.2. </span><span class="content">Using actions from a service worker</span><a class="self-link" href="#using-actions"></a></h4>
   <p><a data-link-type="dfn" href="#persistent-notification" id="ref-for-persistent-notification⑦">Persistent notifications</a> fire <code>notificationclick</code> events on the <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/ServiceWorker/#serviceworkerglobalscope" id="ref-for-serviceworkerglobalscope①">ServiceWorkerGlobalScope</a></code>. </p>
   <p>Here a service worker shows a notification with a single "Archive" <a data-link-type="dfn" href="#actions" id="ref-for-actions①⑤">action</a>, allowing users to perform this common task from the
notification without having to open the website (for example the notification
platform might show a button on the notification). The user can also activate
the main body of the notification to open their inbox. </p>
<pre class="example" id="example-50e7c86c"><a class="self-link" href="#example-50e7c86c"></a>self.registration.showNotification("New mail from Alice", {
  actions: [{action: 'archive', title: "Archive"}]
});

self.addEventListener('notificationclick', function(event) {
  event.notification.close();
  if (event.action === 'archive') {
    silentlyArchiveEmail();
  } else {
    clients.openWindow("/inbox");
  }
}, false);</pre>
   <h4 class="heading settled" data-level="3.5.3" id="tags-example"><span class="secno">3.5.3. </span><span class="content">Using the <code>tag</code> member for multiple instances</span><a class="self-link" href="#tags-example"></a></h4>
   <p>Web applications frequently operate concurrently in multiple instances, such
as when a user opens a mail application in multiple browser tabs. Since the
desktop is a shared resource, the notifications API provides a way for these
instances to easily coordinate, by using the <code>tag</code> member. </p>
   <p>Notifications which represent the same conceptual event can be tagged in the
same way, and when both are shown, the user will only receive one notification. </p>
<pre class="example" id="example-2e2c735a"><a class="self-link" href="#example-2e2c735a"></a>Instance 1                                   | Instance 2
                                             |
// Instance notices there is new mail.       |
new Notification("New mail from John Doe",   |
                 { tag: 'message1' });       |
                                             |
                                             |  // Slightly later, this instance notices
                                             |  // there is new mail.
                                             |  new Notification("New mail from John Doe",
                                             |                   { tag: 'message1' });</pre>
   <p>The result of this situation, if the user agent follows the algorithms here, is a <strong>single</strong> notification "New mail from John Doe". </p>
   <h4 class="heading settled" data-level="3.5.4" id="using-the-tag-member-for-a-single-instance"><span class="secno">3.5.4. </span><span class="content">Using the <code>tag</code> member for a single instance</span><a class="self-link" href="#using-the-tag-member-for-a-single-instance"></a></h4>
   <p>The <code>tag</code> member can also be used by a single instance of an
application to keep its notifications as current as possible as state changes. </p>
   <p>For example, if Alice is using a chat application with Bob, and Bob sends
multiple messages while Alice is idle, the application may prefer that Alice not
see a desktop notification for each message. </p>
<pre class="example" id="example-a1d95db4"><a class="self-link" href="#example-a1d95db4"></a>// Bob says "Hi"
new Notification("Bob: Hi", { tag: 'chat_Bob' });

// Bob says "Are you free this afternoon?"
new Notification("Bob: Hi / Are you free this afternoon?", { tag: 'chat_Bob' });</pre>
   <p>The result of this situation is a <i>single</i> notification; the second one
replaces the first having the same tag. In a platform that queues notifications
(first-in-first-out), using the tag allows the notification to also maintain its
position in the queue. Platforms where the newest notifications are shown first,
a similar result could be achieved using the <code class="idl"><a data-link-type="idl" href="#dom-notification-close" id="ref-for-dom-notification-close②">close()</a></code> method. </p>
   <h2 class="heading settled" data-level="4" id="service-worker-api"><span class="secno">4. </span><span class="content">Service worker API</span><a class="self-link" href="#service-worker-api"></a></h2>
<pre class="idl highlight def"><c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-getnotificationoptions"><code><c- g>GetNotificationOptions</c-></code></dfn> {
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①⓪"><c- b>DOMString</c-></a> <dfn class="idl-code" data-default="&quot;&quot;" data-dfn-for="GetNotificationOptions" data-dfn-type="dict-member" data-export data-type="DOMString " id="dom-getnotificationoptions-tag"><code><c- g>tag</c-></code><a class="self-link" href="#dom-getnotificationoptions-tag"></a></dfn> = "";
};

<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://w3c.github.io/ServiceWorker/#serviceworkerregistration" id="ref-for-serviceworkerregistration"><c- g>ServiceWorkerRegistration</c-></a> {
  <c- b>Promise</c->&lt;<c- b>void</c->> <a class="idl-code" data-link-type="method" href="#dom-serviceworkerregistration-shownotification" id="ref-for-dom-serviceworkerregistration-shownotification①"><c- g>showNotification</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①①"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="ServiceWorkerRegistration/showNotification(title, options), ServiceWorkerRegistration/showNotification(title)" data-dfn-type="argument" data-export id="dom-serviceworkerregistration-shownotification-title-options-title"><code><c- g>title</c-></code><a class="self-link" href="#dom-serviceworkerregistration-shownotification-title-options-title"></a></dfn>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-notificationoptions" id="ref-for-dictdef-notificationoptions①"><c- n>NotificationOptions</c-></a> <dfn class="idl-code" data-dfn-for="ServiceWorkerRegistration/showNotification(title, options), ServiceWorkerRegistration/showNotification(title)" data-dfn-type="argument" data-export id="dom-serviceworkerregistration-shownotification-title-options-options"><code><c- g>options</c-></code><a class="self-link" href="#dom-serviceworkerregistration-shownotification-title-options-options"></a></dfn> = {});
  <c- b>Promise</c->&lt;<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#notification" id="ref-for-notification①①"><c- n>Notification</c-></a>>> <a class="idl-code" data-link-type="method" href="#dom-serviceworkerregistration-getnotifications" id="ref-for-dom-serviceworkerregistration-getnotifications"><c- g>getNotifications</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-getnotificationoptions" id="ref-for-dictdef-getnotificationoptions"><c- n>GetNotificationOptions</c-></a> <dfn class="idl-code" data-dfn-for="ServiceWorkerRegistration/getNotifications(filter), ServiceWorkerRegistration/getNotifications()" data-dfn-type="argument" data-export id="dom-serviceworkerregistration-getnotifications-filter-filter"><code><c- g>filter</c-></code><a class="self-link" href="#dom-serviceworkerregistration-getnotifications-filter-filter"></a></dfn> = {});
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②"><c- g>Exposed</c-></a>=<c- n>ServiceWorker</c->]
<c- b>interface</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="interface" data-export id="notificationevent"><code><c- g>NotificationEvent</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://w3c.github.io/ServiceWorker/#extendableevent" id="ref-for-extendableevent"><c- n>ExtendableEvent</c-></a> {
  <dfn class="idl-code" data-dfn-for="NotificationEvent" data-dfn-type="constructor" data-export data-lt="NotificationEvent(type, eventInitDict)|constructor(type, eventInitDict)" id="dom-notificationevent-notificationevent"><code><c- g>constructor</c-></code><a class="self-link" href="#dom-notificationevent-notificationevent"></a></dfn>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①②"><c- b>DOMString</c-></a> <dfn class="idl-code" data-dfn-for="NotificationEvent/NotificationEvent(type, eventInitDict), NotificationEvent/constructor(type, eventInitDict)" data-dfn-type="argument" data-export id="dom-notificationevent-notificationevent-type-eventinitdict-type"><code><c- g>type</c-></code><a class="self-link" href="#dom-notificationevent-notificationevent-type-eventinitdict-type"></a></dfn>, <a class="n" data-link-type="idl-name" href="#dictdef-notificationeventinit" id="ref-for-dictdef-notificationeventinit"><c- n>NotificationEventInit</c-></a> <dfn class="idl-code" data-dfn-for="NotificationEvent/NotificationEvent(type, eventInitDict), NotificationEvent/constructor(type, eventInitDict)" data-dfn-type="argument" data-export id="dom-notificationevent-notificationevent-type-eventinitdict-eventinitdict"><code><c- g>eventInitDict</c-></code><a class="self-link" href="#dom-notificationevent-notificationevent-type-eventinitdict-eventinitdict"></a></dfn>);

  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#notification" id="ref-for-notification①②"><c- n>Notification</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="NotificationEvent" data-dfn-type="attribute" data-export data-readonly data-type="Notification" id="dom-notificationevent-notification"><code><c- g>notification</c-></code></dfn>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①③"><c- b>DOMString</c-></a> <dfn class="dfn-paneled idl-code" data-dfn-for="NotificationEvent" data-dfn-type="attribute" data-export data-readonly data-type="DOMString" id="dom-notificationevent-action"><code><c- g>action</c-></code></dfn>;
};

<c- b>dictionary</c-> <dfn class="dfn-paneled idl-code" data-dfn-type="dictionary" data-export id="dictdef-notificationeventinit"><code><c- g>NotificationEventInit</c-></code></dfn> : <a class="n" data-link-type="idl-name" href="https://w3c.github.io/ServiceWorker/#dictdef-extendableeventinit" id="ref-for-dictdef-extendableeventinit"><c- n>ExtendableEventInit</c-></a> {
  <c- b>required</c-> <a class="n" data-link-type="idl-name" href="#notification" id="ref-for-notification①③"><c- n>Notification</c-></a> <dfn class="idl-code" data-dfn-for="NotificationEventInit" data-dfn-type="dict-member" data-export data-type="Notification " id="dom-notificationeventinit-notification"><code><c- g>notification</c-></code><a class="self-link" href="#dom-notificationeventinit-notification"></a></dfn>;
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①④"><c- b>DOMString</c-></a> <dfn class="idl-code" data-default="&quot;&quot;" data-dfn-for="NotificationEventInit" data-dfn-type="dict-member" data-export data-type="DOMString " id="dom-notificationeventinit-action"><code><c- g>action</c-></code><a class="self-link" href="#dom-notificationeventinit-action"></a></dfn> = "";
};

<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://w3c.github.io/ServiceWorker/#serviceworkerglobalscope" id="ref-for-serviceworkerglobalscope②"><c- g>ServiceWorkerGlobalScope</c-></a> {
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler④"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-serviceworkerglobalscope-onnotificationclick" id="ref-for-dom-serviceworkerglobalscope-onnotificationclick"><c- g>onnotificationclick</c-></a>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler⑤"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-serviceworkerglobalscope-onnotificationclose" id="ref-for-dom-serviceworkerglobalscope-onnotificationclose"><c- g>onnotificationclose</c-></a>;
};
</pre>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="ServiceWorkerRegistration" data-dfn-type="method" data-export data-lt="showNotification(title, options)|showNotification(title)" id="dom-serviceworkerregistration-shownotification"><code>showNotification(title, options)</code></dfn> method, when invoked, must run these steps: </p>
   <ol>
    <li>
     <p>Let <var>promise</var> be a new promise. </p>
    <li>
     <p>If the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#context-object" id="ref-for-context-object①">context object</a>’s <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#dfn-active-worker" id="ref-for-dfn-active-worker">active worker</a> is
  null, then reject <var>promise</var> with a <code>TypeError</code> exception and return <var>promise</var>. </p>
    <li>
     <p>Let <var>serviceWorkerRegistration</var> be the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#context-object" id="ref-for-context-object②">context object</a>. </p>
    <li>
     <p>Let <var>notification</var> be the result of <a data-link-type="dfn" href="#create-a-notification" id="ref-for-create-a-notification①">creating a notification</a> given <var>title</var>, <var>options</var>, and <var>serviceWorkerRegistration</var>. If this threw an
  exception, reject <var>promise</var> with that exception and return <var>promise</var>. </p>
    <li>
     <p>Run these steps <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel" id="ref-for-in-parallel⑥">in parallel</a>: </p>
     <ol>
      <li>
       <p>If <a data-link-type="dfn" href="#permission" id="ref-for-permission⑥">permission</a> for <var>notification</var>’s <a data-link-type="dfn" href="#concept-origin" id="ref-for-concept-origin⑤">origin</a> is not
    "<code>granted</code>", then reject <var>promise</var> with a <code>TypeError</code> exception,
    and abort these steps. </p>
      <li>
       <p>Run the <a data-link-type="dfn" href="#fetch-steps" id="ref-for-fetch-steps①">fetch steps</a> for <var>notification</var>. </p>
      <li>
       <p>Run the <a data-link-type="dfn" href="#show-steps" id="ref-for-show-steps②">show steps</a> for <var>notification</var>. </p>
      <li>
       <p>Resolve <var>promise</var> with undefined. </p>
     </ol>
    <li>
     <p>Return <var>promise</var>. </p>
   </ol>
   <p>The <dfn class="dfn-paneled idl-code" data-dfn-for="ServiceWorkerRegistration" data-dfn-type="method" data-export data-lt="getNotifications(filter)|getNotifications()" id="dom-serviceworkerregistration-getnotifications"><code>getNotifications(<var>filter</var>)</code></dfn> method, when invoked, must run these steps: </p>
   <ol>
    <li>
     <p>Let <var>promise</var> be a new promise. </p>
    <li>
     <p>Run these steps <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel" id="ref-for-in-parallel⑦">in parallel</a>: </p>
     <ol>
      <li>
       <p>Let <var>tag</var> be <var>filter</var>’s <code>tag</code>. </p>
      <li>
       <p>Let <var>notifications</var> be a <a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list" id="ref-for-list①">list</a> of all <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification⑥①">notifications</a> in the <a data-link-type="dfn" href="#list-of-notifications" id="ref-for-list-of-notifications⑧">list of notifications</a> whose <a data-link-type="dfn" href="#concept-origin" id="ref-for-concept-origin⑥">origin</a> is the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#entry-settings-object" id="ref-for-entry-settings-object⑥">entry settings object</a>’s <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin" id="ref-for-concept-settings-object-origin⑤">origin</a>, whose <a data-link-type="dfn" href="#service-worker-registration" id="ref-for-service-worker-registration③">service worker registration</a> is the <a data-link-type="dfn" href="https://dom.spec.whatwg.org/#context-object" id="ref-for-context-object③">context object</a>, and whose <a data-link-type="dfn" href="#tag" id="ref-for-tag⑤">tag</a>, if <var>tag</var> is not the empty string, is <var>tag</var>. </p>
      <li>
       <p>Let <var>objects</var> be an empty JavaScript array. </p>
      <li>
       <p><a data-link-type="dfn" href="https://infra.spec.whatwg.org/#list-iterate" id="ref-for-list-iterate">For each</a> <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification⑥②">notification</a> in <var>notifications</var>, in creation order, create a new <code class="idl"><a data-link-type="idl" href="#notification" id="ref-for-notification①④">Notification</a></code> object representing <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification⑥③">notification</a> and push
    that object to <var>objects</var>. </p>
      <li>
       <p>Resolve <var>promise</var> with <var>objects</var>. </p>
     </ol>
    <li>
     <p>Return <var>promise</var>. </p>
   </ol>
   <p class="note" role="note">This method returns zero or more new <code class="idl"><a data-link-type="idl" href="#notification" id="ref-for-notification①⑤">Notification</a></code> objects which might represent
the same underlying <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification⑥④">notification</a> of <code class="idl"><a data-link-type="idl" href="#notification" id="ref-for-notification①⑥">Notification</a></code> objects already in existence. </p>
   <hr>
   <p>To <dfn class="dfn-paneled" data-dfn-type="dfn" data-noexport id="fire-a-service-worker-notification-event">fire a service worker notification event</dfn> named <var>name</var> given <var>notification</var> (a <a data-link-type="dfn" href="#concept-notification" id="ref-for-concept-notification⑥⑤">notification</a>), and an optional <var>action</var> (a DOMString,
defaulting to the empty string), <a data-link-type="dfn" href="https://w3c.github.io/ServiceWorker/#fire-functional-event" id="ref-for-fire-functional-event">Fire Functional Event</a> <var>name</var> using <code class="idl"><a data-link-type="idl" href="#notificationevent" id="ref-for-notificationevent">NotificationEvent</a></code> on <var>notification</var>’s <a data-link-type="dfn" href="#service-worker-registration" id="ref-for-service-worker-registration④">service worker registration</a> with the following properties: </p>
   <dl>
    <dt><code class="idl"><a data-link-type="idl" href="#dom-notificationevent-notification" id="ref-for-dom-notificationevent-notification">notification</a></code> 
    <dd>A new <code class="idl"><a data-link-type="idl" href="#notification" id="ref-for-notification①⑦">Notification</a></code> object representing <var>notification</var>. 
    <dt><code class="idl"><a data-link-type="idl" href="#dom-notificationevent-action" id="ref-for-dom-notificationevent-action">action</a></code> 
    <dd><var>action</var> 
   </dl>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-notificationevent-notification" id="ref-for-dom-notificationevent-notification①">notification</a></code> attribute’s getter must return the
value it was initialized to. </p>
   <p>The <code class="idl"><a data-link-type="idl" href="#dom-notificationevent-action" id="ref-for-dom-notificationevent-action①">action</a></code> attribute’s getter must return the value it
was initialized to. </p>
   <p>The following is the <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handlers" id="ref-for-event-handlers②">event handler</a> (and its corresponding <a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-event-type" id="ref-for-event-handler-event-type②">event handler event type</a>) that must be supported as attribute by the <code class="idl"><a data-link-type="idl" href="https://w3c.github.io/ServiceWorker/#serviceworkerglobalscope" id="ref-for-serviceworkerglobalscope③">ServiceWorkerGlobalScope</a></code> object: </p>
   <table>
    <thead>
     <tr>
      <th><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handlers" id="ref-for-event-handlers③">event handler</a> 
      <th><a data-link-type="dfn" href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-event-type" id="ref-for-event-handler-event-type③">event handler event type</a> 
    <tbody>
     <tr>
      <td><dfn class="dfn-paneled idl-code" data-dfn-for="ServiceWorkerGlobalScope" data-dfn-type="attribute" data-export id="dom-serviceworkerglobalscope-onnotificationclick"><code>onnotificationclick</code></dfn> 
      <td><code>notificationclick</code> 
     <tr>
      <td><dfn class="dfn-paneled idl-code" data-dfn-for="ServiceWorkerGlobalScope" data-dfn-type="attribute" data-export id="dom-serviceworkerglobalscope-onnotificationclose"><code>onnotificationclose</code></dfn> 
      <td><code>notificationclose</code> 
   </table>
   <h2 class="no-num heading settled" id="acknowledgments"><span class="content">Acknowledgments</span><a class="self-link" href="#acknowledgments"></a></h2>
   <p>Thanks to
Addison Phillips,
Aharon (Vladimir) Lanin,
Alex Russell,
Anssi Kostiainen,
Arkadiusz Michalski,
Boris Zbarsky,
David Håsäther,
Doug Turner,
Drew Wilson,
Ehsan Akhgari,
Frederick Hirsch,
Ian Hickson,
Jake Archibald,
James Graham,
John Mellor,
Jon Lee,
Jonas Sicking,
Michael Cooper,
Michael Henretty,
Michael™ Smith,
Michael van Ouwerkerk,
Nicolás Satragno,
Olli Pettay,
Peter Beverloo,
Philip Jägenstedt,
Reuben Morais,
Rich Tibbett,
Robert Bindar,
박상현 (Sanghyun Park),
Simon Pieters,
Theresa O’Connor,
timeless, and
triple-underscore
for being awesome. </p>
   <p>This standard is written by <a href="https://annevankesteren.nl/" lang="nl">Anne van Kesteren</a> (<a href="https://www.mozilla.org/">Mozilla</a>, <a href="mailto:annevk@annevk.nl">annevk@annevk.nl</a>). An earlier iteration was written
by John Gregg (<a href="https://www.google.com/">Google</a>, <a href="mailto:johnnyg@google.com">johnnyg@google.com</a>). </p>
   <p>Copyright © 1970 WHATWG (Apple, Google, Mozilla, Microsoft). This work is licensed under a <a href="https://creativecommons.org/licenses/by/4.0/" rel="license">Creative Commons Attribution
4.0 International License</a>. </p>
  </main>
<script>
"use strict";
if ("serviceWorker" in navigator) {
  navigator.serviceWorker.register("/service-worker.js");
}
</script>
  <h2 class="no-num no-ref heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
  <h3 class="no-num no-ref heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
  <ul class="index">
   <li>
    action
    <ul>
     <li><a href="#dom-notificationevent-action">attribute for NotificationEvent</a><span>, in §4</span>
     <li><a href="#actions">dfn for notification</a><span>, in §2</span>
     <li><a href="#dom-notificationaction-action">dict-member for NotificationAction</a><span>, in §3</span>
     <li><a href="#dom-notificationeventinit-action">dict-member for NotificationEventInit</a><span>, in §4</span>
    </ul>
   <li>
    actions
    <ul>
     <li><a href="#dom-notification-actions">attribute for Notification</a><span>, in §3.4</span>
     <li><a href="#dom-notificationoptions-actions">dict-member for NotificationOptions</a><span>, in §3</span>
    </ul>
   <li><a href="#alert-steps">alert steps</a><span>, in §2.9</span>
   <li><a href="#dom-notificationdirection-auto">"auto"</a><span>, in §3</span>
   <li>
    badge
    <ul>
     <li><a href="#dom-notification-badge">attribute for Notification</a><span>, in §3.4</span>
     <li><a href="#dom-notificationoptions-badge">dict-member for NotificationOptions</a><span>, in §3</span>
    </ul>
   <li><a href="#badge-resource">badge resource</a><span>, in §2</span>
   <li><a href="#badge-url">badge URL</a><span>, in §2</span>
   <li>
    body
    <ul>
     <li><a href="#dom-notification-body">attribute for Notification</a><span>, in §3.4</span>
     <li><a href="#body">dfn for notification</a><span>, in §2</span>
     <li><a href="#dom-notificationoptions-body">dict-member for NotificationOptions</a><span>, in §3</span>
    </ul>
   <li><a href="#dom-notification-close">close()</a><span>, in §3.4</span>
   <li><a href="#close-steps">close steps</a><span>, in §2.8</span>
   <li><a href="#dom-notification-notification">constructor(title)</a><span>, in §3.2</span>
   <li><a href="#dom-notification-notification">constructor(title, options)</a><span>, in §3.2</span>
   <li><a href="#dom-notificationevent-notificationevent">constructor(type, eventInitDict)</a><span>, in §4</span>
   <li><a href="#create-a-notification">create a notification</a><span>, in §2</span>
   <li><a href="#create-a-notification">creating a notification</a><span>, in §2</span>
   <li>
    data
    <ul>
     <li><a href="#dom-notification-data">attribute for Notification</a><span>, in §3.4</span>
     <li><a href="#data">dfn for notification</a><span>, in §2</span>
     <li><a href="#dom-notificationoptions-data">dict-member for NotificationOptions</a><span>, in §3</span>
    </ul>
   <li><a href="#dom-notificationpermission-default">"default"</a><span>, in §3</span>
   <li><a href="#dom-notificationpermission-denied">"denied"</a><span>, in §3</span>
   <li>
    dir
    <ul>
     <li><a href="#dom-notification-dir">attribute for Notification</a><span>, in §3.4</span>
     <li><a href="#dom-notificationoptions-dir">dict-member for NotificationOptions</a><span>, in §3</span>
    </ul>
   <li><a href="#concept-direction">direction</a><span>, in §2</span>
   <li><a href="#fetch-steps">fetch steps</a><span>, in §2.5</span>
   <li><a href="#fire-a-service-worker-notification-event">fire a service worker notification event</a><span>, in §4</span>
   <li><a href="#dictdef-getnotificationoptions">GetNotificationOptions</a><span>, in §4</span>
   <li><a href="#dom-serviceworkerregistration-getnotifications">getNotifications()</a><span>, in §4</span>
   <li><a href="#dom-serviceworkerregistration-getnotifications">getNotifications(filter)</a><span>, in §4</span>
   <li><a href="#dom-notificationpermission-granted">"granted"</a><span>, in §3</span>
   <li><a href="#handle-close-events">handle close events</a><span>, in §2.8</span>
   <li>
    icon
    <ul>
     <li><a href="#dom-notification-icon">attribute for Notification</a><span>, in §3.4</span>
     <li><a href="#dom-notificationaction-icon">dict-member for NotificationAction</a><span>, in §3</span>
     <li><a href="#dom-notificationoptions-icon">dict-member for NotificationOptions</a><span>, in §3</span>
    </ul>
   <li>
    icon resource
    <ul>
     <li><a href="#action-icon-resource">dfn for action</a><span>, in §2</span>
     <li><a href="#icon-resource">dfn for notification</a><span>, in §2</span>
    </ul>
   <li>
    icon URL
    <ul>
     <li><a href="#action-icon-url">dfn for action</a><span>, in §2</span>
     <li><a href="#icon-url">dfn for notification</a><span>, in §2</span>
    </ul>
   <li>
    image
    <ul>
     <li><a href="#dom-notification-image">attribute for Notification</a><span>, in §3.4</span>
     <li><a href="#dom-notificationoptions-image">dict-member for NotificationOptions</a><span>, in §3</span>
    </ul>
   <li><a href="#image-resource">image resource</a><span>, in §2</span>
   <li><a href="#image-url">image URL</a><span>, in §2</span>
   <li>
    lang
    <ul>
     <li><a href="#dom-notification-lang">attribute for Notification</a><span>, in §3.4</span>
     <li><a href="#dom-notificationoptions-lang">dict-member for NotificationOptions</a><span>, in §3</span>
    </ul>
   <li><a href="#concept-language">language</a><span>, in §2</span>
   <li><a href="#list-of-notifications">list of notifications</a><span>, in §2.1</span>
   <li><a href="#dom-notificationdirection-ltr">"ltr"</a><span>, in §3</span>
   <li><a href="#dom-notification-maxactions">maxActions</a><span>, in §3.3</span>
   <li><a href="#maximum-number-of-actions">maximum number of actions</a><span>, in §2</span>
   <li><a href="#action-name">name</a><span>, in §2</span>
   <li><a href="#non-persistent-notification">non-persistent notification</a><span>, in §2</span>
   <li><a href="#notification">Notification</a><span>, in §3</span>
   <li>
    notification
    <ul>
     <li><a href="#dom-notificationevent-notification">attribute for NotificationEvent</a><span>, in §4</span>
     <li><a href="#concept-notification">definition of</a><span>, in §2</span>
     <li><a href="#dom-notificationeventinit-notification">dict-member for NotificationEventInit</a><span>, in §4</span>
    </ul>
   <li><a href="#dictdef-notificationaction">NotificationAction</a><span>, in §3</span>
   <li><a href="#enumdef-notificationdirection">NotificationDirection</a><span>, in §3</span>
   <li><a href="#notificationevent">NotificationEvent</a><span>, in §4</span>
   <li><a href="#dictdef-notificationeventinit">NotificationEventInit</a><span>, in §4</span>
   <li><a href="#dom-notificationevent-notificationevent">NotificationEvent(type, eventInitDict)</a><span>, in §4</span>
   <li><a href="#dictdef-notificationoptions">NotificationOptions</a><span>, in §3</span>
   <li><a href="#enumdef-notificationpermission">NotificationPermission</a><span>, in §3</span>
   <li><a href="#callbackdef-notificationpermissioncallback">NotificationPermissionCallback</a><span>, in §3</span>
   <li><a href="#dom-notification-notification">Notification(title)</a><span>, in §3.2</span>
   <li><a href="#dom-notification-notification">Notification(title, options)</a><span>, in §3.2</span>
   <li><a href="#dom-notification-onclick">onclick</a><span>, in §3.4</span>
   <li><a href="#dom-notification-onclose">onclose</a><span>, in §3.4</span>
   <li><a href="#dom-notification-onerror">onerror</a><span>, in §3.4</span>
   <li><a href="#dom-serviceworkerglobalscope-onnotificationclick">onnotificationclick</a><span>, in §4</span>
   <li><a href="#dom-serviceworkerglobalscope-onnotificationclose">onnotificationclose</a><span>, in §4</span>
   <li><a href="#dom-notification-onshow">onshow</a><span>, in §3.4</span>
   <li><a href="#concept-origin">origin</a><span>, in §2</span>
   <li>
    permission
    <ul>
     <li><a href="#dom-notification-permission">attribute for Notification</a><span>, in §3.3</span>
     <li><a href="#permission">definition of</a><span>, in §2.2</span>
    </ul>
   <li><a href="#persistent-notification">persistent notification</a><span>, in §2</span>
   <li>
    renotify
    <ul>
     <li><a href="#dom-notification-renotify">attribute for Notification</a><span>, in §3.4</span>
     <li><a href="#dom-notificationoptions-renotify">dict-member for NotificationOptions</a><span>, in §3</span>
    </ul>
   <li><a href="#renotify-preference-flag">renotify preference flag</a><span>, in §2</span>
   <li><a href="#dom-notification-requestpermission">requestPermission()</a><span>, in §3.3</span>
   <li><a href="#dom-notification-requestpermission">requestPermission(deprecatedCallback)</a><span>, in §3.3</span>
   <li>
    requireInteraction
    <ul>
     <li><a href="#dom-notification-requireinteraction">attribute for Notification</a><span>, in §3.4</span>
     <li><a href="#dom-notificationoptions-requireinteraction">dict-member for NotificationOptions</a><span>, in §3</span>
    </ul>
   <li><a href="#require-interaction-preference-flag">require interaction preference flag</a><span>, in §2</span>
   <li><a href="#dom-notificationdirection-rtl">"rtl"</a><span>, in §3</span>
   <li><a href="#service-worker-registration">service worker registration</a><span>, in §2</span>
   <li><a href="#dom-serviceworkerregistration-shownotification">showNotification(title)</a><span>, in §4</span>
   <li><a href="#dom-serviceworkerregistration-shownotification">showNotification(title, options)</a><span>, in §4</span>
   <li><a href="#show-steps">show steps</a><span>, in §2.6</span>
   <li>
    silent
    <ul>
     <li><a href="#dom-notification-silent">attribute for Notification</a><span>, in §3.4</span>
     <li><a href="#dom-notificationoptions-silent">dict-member for NotificationOptions</a><span>, in §3</span>
    </ul>
   <li><a href="#silent-preference-flag">silent preference flag</a><span>, in §2</span>
   <li>
    tag
    <ul>
     <li><a href="#dom-notification-tag">attribute for Notification</a><span>, in §3.4</span>
     <li><a href="#tag">dfn for notification</a><span>, in §2</span>
     <li><a href="#dom-getnotificationoptions-tag">dict-member for GetNotificationOptions</a><span>, in §4</span>
     <li><a href="#dom-notificationoptions-tag">dict-member for NotificationOptions</a><span>, in §3</span>
    </ul>
   <li>
    timestamp
    <ul>
     <li><a href="#dom-notification-timestamp">attribute for Notification</a><span>, in §3.4</span>
     <li><a href="#timestamp">dfn for notification</a><span>, in §2</span>
     <li><a href="#dom-notificationoptions-timestamp">dict-member for NotificationOptions</a><span>, in §3</span>
    </ul>
   <li>
    title
    <ul>
     <li><a href="#dom-notification-title">attribute for Notification</a><span>, in §3.4</span>
     <li><a href="#action-title">dfn for action</a><span>, in §2</span>
     <li><a href="#concept-title">dfn for notification</a><span>, in §2</span>
     <li><a href="#dom-notificationaction-title">dict-member for NotificationAction</a><span>, in §3</span>
    </ul>
   <li>
    vibrate
    <ul>
     <li><a href="#dom-notification-vibrate">attribute for Notification</a><span>, in §3.4</span>
     <li><a href="#dom-notificationoptions-vibrate">dict-member for NotificationOptions</a><span>, in §3</span>
    </ul>
   <li><a href="#vibration-pattern">vibration pattern</a><span>, in §2</span>
  </ul>
  <aside class="dfn-panel" data-for="term-for-eventtarget">
   <a href="https://dom.spec.whatwg.org/#eventtarget">https://dom.spec.whatwg.org/#eventtarget</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-eventtarget">3. API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-event-cancelable">
   <a href="https://dom.spec.whatwg.org/#dom-event-cancelable">https://dom.spec.whatwg.org/#dom-event-cancelable</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-event-cancelable">2.7. Activating a notification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-context-object">
   <a href="https://dom.spec.whatwg.org/#context-object">https://dom.spec.whatwg.org/#context-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-context-object">3.4. Object members</a>
    <li><a href="#ref-for-context-object①">4. Service worker API</a> <a href="#ref-for-context-object②">(2)</a> <a href="#ref-for-context-object③">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-event-listener">
   <a href="https://dom.spec.whatwg.org/#concept-event-listener">https://dom.spec.whatwg.org/#concept-event-listener</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-event-listener">3.1. Garbage collection</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-event-fire">
   <a href="https://dom.spec.whatwg.org/#concept-event-fire">https://dom.spec.whatwg.org/#concept-event-fire</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-event-fire">2.6. Showing a notification</a>
    <li><a href="#ref-for-concept-event-fire①">2.7. Activating a notification</a>
    <li><a href="#ref-for-concept-event-fire②">2.8. Closing a notification</a>
    <li><a href="#ref-for-concept-event-fire③">3.2. Constructors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-fetch">
   <a href="https://fetch.spec.whatwg.org/#concept-fetch">https://fetch.spec.whatwg.org/#concept-fetch</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-fetch">2.5. Resources</a> <a href="#ref-for-concept-fetch①">(2)</a> <a href="#ref-for-concept-fetch②">(3)</a> <a href="#ref-for-concept-fetch③">(4)</a>
    <li><a href="#ref-for-concept-fetch④">2.6. Showing a notification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-internal-response">
   <a href="https://fetch.spec.whatwg.org/#concept-internal-response">https://fetch.spec.whatwg.org/#concept-internal-response</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-internal-response">2.5. Resources</a> <a href="#ref-for-concept-internal-response①">(2)</a> <a href="#ref-for-concept-internal-response②">(3)</a> <a href="#ref-for-concept-internal-response③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-response">
   <a href="https://fetch.spec.whatwg.org/#concept-response">https://fetch.spec.whatwg.org/#concept-response</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-response">2.5. Resources</a> <a href="#ref-for-concept-response①">(2)</a> <a href="#ref-for-concept-response②">(3)</a> <a href="#ref-for-concept-response③">(4)</a> <a href="#ref-for-concept-response④">(5)</a> <a href="#ref-for-concept-response⑤">(6)</a> <a href="#ref-for-concept-response⑥">(7)</a> <a href="#ref-for-concept-response⑦">(8)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-response-type">
   <a href="https://fetch.spec.whatwg.org/#concept-response-type">https://fetch.spec.whatwg.org/#concept-response-type</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-response-type">2.5. Resources</a> <a href="#ref-for-concept-response-type①">(2)</a> <a href="#ref-for-concept-response-type②">(3)</a> <a href="#ref-for-concept-response-type③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-eventhandler">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler">https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-eventhandler">3. API</a> <a href="#ref-for-eventhandler①">(2)</a> <a href="#ref-for-eventhandler②">(3)</a> <a href="#ref-for-eventhandler③">(4)</a>
    <li><a href="#ref-for-eventhandler④">4. Service worker API</a> <a href="#ref-for-eventhandler⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-structureddeserialize">
   <a href="https://html.spec.whatwg.org/multipage/structured-data.html#structureddeserialize">https://html.spec.whatwg.org/multipage/structured-data.html#structureddeserialize</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-structureddeserialize">3.4. Object members</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-structuredserializeforstorage">
   <a href="https://html.spec.whatwg.org/multipage/structured-data.html#structuredserializeforstorage">https://html.spec.whatwg.org/multipage/structured-data.html#structuredserializeforstorage</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-structuredserializeforstorage">2. Notifications</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-browsing-context">
   <a href="https://html.spec.whatwg.org/multipage/browsers.html#browsing-context">https://html.spec.whatwg.org/multipage/browsers.html#browsing-context</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-browsing-context">2.7. Activating a notification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-current-global-object">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object">https://html.spec.whatwg.org/multipage/webappapis.html#current-global-object</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-current-global-object">3.2. Constructors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-handlers">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handlers">https://html.spec.whatwg.org/multipage/webappapis.html#event-handlers</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-handlers">3.4. Object members</a> <a href="#ref-for-event-handlers①">(2)</a>
    <li><a href="#ref-for-event-handlers②">4. Service worker API</a> <a href="#ref-for-event-handlers③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-event-handler-event-type">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-event-type">https://html.spec.whatwg.org/multipage/webappapis.html#event-handler-event-type</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-event-handler-event-type">3.4. Object members</a> <a href="#ref-for-event-handler-event-type①">(2)</a>
    <li><a href="#ref-for-event-handler-event-type②">4. Service worker API</a> <a href="#ref-for-event-handler-event-type③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dom-window-focus">
   <a href="https://html.spec.whatwg.org/multipage/interaction.html#dom-window-focus">https://html.spec.whatwg.org/multipage/interaction.html#dom-window-focus</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-window-focus">2.7. Activating a notification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-in-parallel">
   <a href="https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel">https://html.spec.whatwg.org/multipage/infrastructure.html#in-parallel</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-in-parallel">2.5. Resources</a> <a href="#ref-for-in-parallel①">(2)</a> <a href="#ref-for-in-parallel②">(3)</a> <a href="#ref-for-in-parallel③">(4)</a>
    <li><a href="#ref-for-in-parallel④">3.2. Constructors</a>
    <li><a href="#ref-for-in-parallel⑤">3.3. Static members</a>
    <li><a href="#ref-for-in-parallel⑥">4. Service worker API</a> <a href="#ref-for-in-parallel⑦">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-settings-object-origin">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin">https://html.spec.whatwg.org/multipage/webappapis.html#concept-settings-object-origin</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-settings-object-origin">2. Notifications</a>
    <li><a href="#ref-for-concept-settings-object-origin①">3.3. Static members</a> <a href="#ref-for-concept-settings-object-origin②">(2)</a> <a href="#ref-for-concept-settings-object-origin③">(3)</a> <a href="#ref-for-concept-settings-object-origin④">(4)</a>
    <li><a href="#ref-for-concept-settings-object-origin⑤">4. Service worker API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-queue-a-task">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task">https://html.spec.whatwg.org/multipage/webappapis.html#queue-a-task</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-queue-a-task">2.6. Showing a notification</a>
    <li><a href="#ref-for-queue-a-task①">2.7. Activating a notification</a>
    <li><a href="#ref-for-queue-a-task②">2.8. Closing a notification</a>
    <li><a href="#ref-for-queue-a-task③">3.2. Constructors</a>
    <li><a href="#ref-for-queue-a-task④">3.3. Static members</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-relevant-realm">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm">https://html.spec.whatwg.org/multipage/webappapis.html#concept-relevant-realm</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-relevant-realm">3.4. Object members</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-report-the-exception">
   <a href="https://html.spec.whatwg.org/multipage/webappapis.html#report-the-exception">https://html.spec.whatwg.org/multipage/webappapis.html#report-the-exception</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-report-the-exception">3.3. Static members</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-same-origin">
   <a href="https://html.spec.whatwg.org/multipage/origin.html#same-origin">https://html.spec.whatwg.org/multipage/origin.html#same-origin</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-same-origin">2.6. Showing a notification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-list-append">
   <a href="https://infra.spec.whatwg.org/#list-append">https://infra.spec.whatwg.org/#list-append</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list-append">2.6. Showing a notification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-list-contain">
   <a href="https://infra.spec.whatwg.org/#list-contain">https://infra.spec.whatwg.org/#list-contain</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list-contain">2.8. Closing a notification</a>
    <li><a href="#ref-for-list-contain①">3.1. Garbage collection</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-list-iterate">
   <a href="https://infra.spec.whatwg.org/#list-iterate">https://infra.spec.whatwg.org/#list-iterate</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list-iterate">4. Service worker API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-list">
   <a href="https://infra.spec.whatwg.org/#list">https://infra.spec.whatwg.org/#list</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list">2.1. Lifetime and UI integration</a>
    <li><a href="#ref-for-list①">4. Service worker API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-list-remove">
   <a href="https://infra.spec.whatwg.org/#list-remove">https://infra.spec.whatwg.org/#list-remove</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list-remove">2.6. Showing a notification</a>
    <li><a href="#ref-for-list-remove①">2.8. Closing a notification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-list-replace">
   <a href="https://infra.spec.whatwg.org/#list-replace">https://infra.spec.whatwg.org/#list-replace</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list-replace">2.6. Showing a notification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-extendableevent">
   <a href="https://w3c.github.io/ServiceWorker/#extendableevent">https://w3c.github.io/ServiceWorker/#extendableevent</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-extendableevent">4. Service worker API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dictdef-extendableeventinit">
   <a href="https://w3c.github.io/ServiceWorker/#dictdef-extendableeventinit">https://w3c.github.io/ServiceWorker/#dictdef-extendableeventinit</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-extendableeventinit">4. Service worker API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-serviceworkerglobalscope">
   <a href="https://w3c.github.io/ServiceWorker/#serviceworkerglobalscope">https://w3c.github.io/ServiceWorker/#serviceworkerglobalscope</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-serviceworkerglobalscope">3.2. Constructors</a>
    <li><a href="#ref-for-serviceworkerglobalscope①">3.5.2. Using actions from a service worker</a>
    <li><a href="#ref-for-serviceworkerglobalscope②">4. Service worker API</a> <a href="#ref-for-serviceworkerglobalscope③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-serviceworkerregistration">
   <a href="https://w3c.github.io/ServiceWorker/#serviceworkerregistration">https://w3c.github.io/ServiceWorker/#serviceworkerregistration</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-serviceworkerregistration">4. Service worker API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-active-worker">
   <a href="https://w3c.github.io/ServiceWorker/#dfn-active-worker">https://w3c.github.io/ServiceWorker/#dfn-active-worker</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-active-worker">4. Service worker API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-fire-functional-event">
   <a href="https://w3c.github.io/ServiceWorker/#fire-functional-event">https://w3c.github.io/ServiceWorker/#fire-functional-event</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fire-functional-event">4. Service worker API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-url-parser">
   <a href="https://url.spec.whatwg.org/#concept-url-parser">https://url.spec.whatwg.org/#concept-url-parser</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-url-parser">2. Notifications</a> <a href="#ref-for-concept-url-parser①">(2)</a> <a href="#ref-for-concept-url-parser②">(3)</a> <a href="#ref-for-concept-url-parser③">(4)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-concept-url-serializer">
   <a href="https://url.spec.whatwg.org/#concept-url-serializer">https://url.spec.whatwg.org/#concept-url-serializer</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-url-serializer">3.4. Object members</a> <a href="#ref-for-concept-url-serializer①">(2)</a> <a href="#ref-for-concept-url-serializer②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-DOMString">
   <a href="https://heycam.github.io/webidl/#idl-DOMString">https://heycam.github.io/webidl/#idl-DOMString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-DOMString">3. API</a> <a href="#ref-for-idl-DOMString①">(2)</a> <a href="#ref-for-idl-DOMString②">(3)</a> <a href="#ref-for-idl-DOMString③">(4)</a> <a href="#ref-for-idl-DOMString④">(5)</a> <a href="#ref-for-idl-DOMString⑤">(6)</a> <a href="#ref-for-idl-DOMString⑥">(7)</a> <a href="#ref-for-idl-DOMString⑦">(8)</a> <a href="#ref-for-idl-DOMString⑧">(9)</a> <a href="#ref-for-idl-DOMString⑨">(10)</a>
    <li><a href="#ref-for-idl-DOMString①⓪">4. Service worker API</a> <a href="#ref-for-idl-DOMString①①">(2)</a> <a href="#ref-for-idl-DOMString①②">(3)</a> <a href="#ref-for-idl-DOMString①③">(4)</a> <a href="#ref-for-idl-DOMString①④">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-DOMTimeStamp">
   <a href="https://heycam.github.io/webidl/#DOMTimeStamp">https://heycam.github.io/webidl/#DOMTimeStamp</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-DOMTimeStamp">2. Notifications</a>
    <li><a href="#ref-for-DOMTimeStamp①">3. API</a> <a href="#ref-for-DOMTimeStamp②">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-Exposed">
   <a href="https://heycam.github.io/webidl/#Exposed">https://heycam.github.io/webidl/#Exposed</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-Exposed">3. API</a> <a href="#ref-for-Exposed①">(2)</a>
    <li><a href="#ref-for-Exposed②">4. Service worker API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-SameObject">
   <a href="https://heycam.github.io/webidl/#SameObject">https://heycam.github.io/webidl/#SameObject</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-SameObject">3. API</a> <a href="#ref-for-SameObject①">(2)</a> <a href="#ref-for-SameObject②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-USVString">
   <a href="https://heycam.github.io/webidl/#idl-USVString">https://heycam.github.io/webidl/#idl-USVString</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-USVString">3. API</a> <a href="#ref-for-idl-USVString①">(2)</a> <a href="#ref-for-idl-USVString②">(3)</a> <a href="#ref-for-idl-USVString③">(4)</a> <a href="#ref-for-idl-USVString④">(5)</a> <a href="#ref-for-idl-USVString⑤">(6)</a> <a href="#ref-for-idl-USVString⑥">(7)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-boolean">
   <a href="https://heycam.github.io/webidl/#idl-boolean">https://heycam.github.io/webidl/#idl-boolean</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-boolean">3. API</a> <a href="#ref-for-idl-boolean①">(2)</a> <a href="#ref-for-idl-boolean②">(3)</a> <a href="#ref-for-idl-boolean③">(4)</a> <a href="#ref-for-idl-boolean④">(5)</a> <a href="#ref-for-idl-boolean⑤">(6)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-create-frozen-array">
   <a href="https://heycam.github.io/webidl/#dfn-create-frozen-array">https://heycam.github.io/webidl/#dfn-create-frozen-array</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-create-frozen-array">3.4. Object members</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-dfn-throw">
   <a href="https://heycam.github.io/webidl/#dfn-throw">https://heycam.github.io/webidl/#dfn-throw</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dfn-throw">2. Notifications</a> <a href="#ref-for-dfn-throw①">(2)</a> <a href="#ref-for-dfn-throw②">(3)</a>
    <li><a href="#ref-for-dfn-throw③">3.2. Constructors</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="term-for-idl-unsigned-long">
   <a href="https://heycam.github.io/webidl/#idl-unsigned-long">https://heycam.github.io/webidl/#idl-unsigned-long</a><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-idl-unsigned-long">3. API</a> <a href="#ref-for-idl-unsigned-long①">(2)</a>
   </ul>
  </aside>
  <h3 class="no-num no-ref heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
  <ul class="index">
   <li>
    <a data-link-type="biblio">[DOM]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-eventtarget" style="color:initial">EventTarget</span>
     <li><span class="dfn-paneled" id="term-for-dom-event-cancelable" style="color:initial">cancelable</span>
     <li><span class="dfn-paneled" id="term-for-context-object" style="color:initial">context object</span>
     <li><span class="dfn-paneled" id="term-for-concept-event-listener" style="color:initial">event listener</span>
     <li><span class="dfn-paneled" id="term-for-concept-event-fire" style="color:initial">fire an event</span>
    </ul>
   <li>
    <a data-link-type="biblio">[FETCH]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-concept-fetch" style="color:initial">fetch</span>
     <li><span class="dfn-paneled" id="term-for-concept-internal-response" style="color:initial">internal response</span>
     <li><span class="dfn-paneled" id="term-for-concept-response" style="color:initial">response</span>
     <li><span class="dfn-paneled" id="term-for-concept-response-type" style="color:initial">type</span>
    </ul>
   <li>
    <a data-link-type="biblio">[HTML]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-eventhandler" style="color:initial">EventHandler</span>
     <li><span class="dfn-paneled" id="term-for-structureddeserialize" style="color:initial">StructuredDeserialize</span>
     <li><span class="dfn-paneled" id="term-for-structuredserializeforstorage" style="color:initial">StructuredSerializeForStorage</span>
     <li><span class="dfn-paneled" id="term-for-browsing-context" style="color:initial">browsing context</span>
     <li><span class="dfn-paneled" id="term-for-current-global-object" style="color:initial">current global object</span>
     <li><span class="dfn-paneled" id="term-for-event-handlers" style="color:initial">event handler</span>
     <li><span class="dfn-paneled" id="term-for-event-handler-event-type" style="color:initial">event handler event type</span>
     <li><span class="dfn-paneled" id="term-for-dom-window-focus" style="color:initial">focus()</span>
     <li><span class="dfn-paneled" id="term-for-in-parallel" style="color:initial">in parallel</span>
     <li><span class="dfn-paneled" id="term-for-concept-settings-object-origin" style="color:initial">origin <small>(for environment settings object)</small></span>
     <li><span class="dfn-paneled" id="term-for-queue-a-task" style="color:initial">queue a task</span>
     <li><span class="dfn-paneled" id="term-for-concept-relevant-realm" style="color:initial">relevant realm</span>
     <li><span class="dfn-paneled" id="term-for-report-the-exception" style="color:initial">report the exception</span>
     <li><span class="dfn-paneled" id="term-for-same-origin" style="color:initial">same origin</span>
    </ul>
   <li>
    <a data-link-type="biblio">[INFRA]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-list-append" style="color:initial">append</span>
     <li><span class="dfn-paneled" id="term-for-list-contain" style="color:initial">contain</span>
     <li><span class="dfn-paneled" id="term-for-list-iterate" style="color:initial">for each</span>
     <li><span class="dfn-paneled" id="term-for-list" style="color:initial">list</span>
     <li><span class="dfn-paneled" id="term-for-list-remove" style="color:initial">remove</span>
     <li><span class="dfn-paneled" id="term-for-list-replace" style="color:initial">replace</span>
    </ul>
   <li>
    <a data-link-type="biblio">[SERVICE-WORKERS]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-extendableevent" style="color:initial">ExtendableEvent</span>
     <li><span class="dfn-paneled" id="term-for-dictdef-extendableeventinit" style="color:initial">ExtendableEventInit</span>
     <li><span class="dfn-paneled" id="term-for-serviceworkerglobalscope" style="color:initial">ServiceWorkerGlobalScope</span>
     <li><span class="dfn-paneled" id="term-for-serviceworkerregistration" style="color:initial">ServiceWorkerRegistration</span>
     <li><span class="dfn-paneled" id="term-for-dfn-active-worker" style="color:initial">active worker</span>
     <li><span class="dfn-paneled" id="term-for-fire-functional-event" style="color:initial">fire functional event</span>
    </ul>
   <li>
    <a data-link-type="biblio">[URL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-concept-url-parser" style="color:initial">url parser</span>
     <li><span class="dfn-paneled" id="term-for-concept-url-serializer" style="color:initial">url serializer</span>
    </ul>
   <li>
    <a data-link-type="biblio">[WEBIDL]</a> defines the following terms:
    <ul>
     <li><span class="dfn-paneled" id="term-for-idl-DOMString" style="color:initial">DOMString</span>
     <li><span class="dfn-paneled" id="term-for-DOMTimeStamp" style="color:initial">DOMTimeStamp</span>
     <li><span class="dfn-paneled" id="term-for-Exposed" style="color:initial">Exposed</span>
     <li><span class="dfn-paneled" id="term-for-SameObject" style="color:initial">SameObject</span>
     <li><span class="dfn-paneled" id="term-for-idl-USVString" style="color:initial">USVString</span>
     <li><span class="dfn-paneled" id="term-for-idl-boolean" style="color:initial">boolean</span>
     <li><span class="dfn-paneled" id="term-for-dfn-create-frozen-array" style="color:initial">create a frozen array</span>
     <li><span class="dfn-paneled" id="term-for-dfn-throw" style="color:initial">throw</span>
     <li><span class="dfn-paneled" id="term-for-idl-unsigned-long" style="color:initial">unsigned long</span>
    </ul>
  </ul>
  <h2 class="no-num no-ref heading settled" id="references"><span class="content">References</span><a class="self-link" href="#references"></a></h2>
  <h3 class="no-num no-ref heading settled" id="normative"><span class="content">Normative References</span><a class="self-link" href="#normative"></a></h3>
  <dl>
   <dt id="biblio-bidi">[BIDI]
   <dd>Mark Davis; Aharon Lanin; Andrew Glass. <a href="https://www.unicode.org/reports/tr9/tr9-41.html">Unicode Bidirectional Algorithm</a>. 4 February 2019. Unicode Standard Annex #9. URL: <a href="https://www.unicode.org/reports/tr9/tr9-41.html">https://www.unicode.org/reports/tr9/tr9-41.html</a>
   <dt id="biblio-dom">[DOM]
   <dd>Anne van Kesteren. <a href="https://dom.spec.whatwg.org/">DOM Standard</a>. Living Standard. URL: <a href="https://dom.spec.whatwg.org/">https://dom.spec.whatwg.org/</a>
   <dt id="biblio-fetch">[FETCH]
   <dd>Anne van Kesteren. <a href="https://fetch.spec.whatwg.org/">Fetch Standard</a>. Living Standard. URL: <a href="https://fetch.spec.whatwg.org/">https://fetch.spec.whatwg.org/</a>
   <dt id="biblio-html">[HTML]
   <dd>Anne van Kesteren; et al. <a href="https://html.spec.whatwg.org/multipage/">HTML Standard</a>. Living Standard. URL: <a href="https://html.spec.whatwg.org/multipage/">https://html.spec.whatwg.org/multipage/</a>
   <dt id="biblio-infra">[INFRA]
   <dd>Anne van Kesteren; Domenic Denicola. <a href="https://infra.spec.whatwg.org/">Infra Standard</a>. Living Standard. URL: <a href="https://infra.spec.whatwg.org/">https://infra.spec.whatwg.org/</a>
   <dt id="biblio-lang">[LANG]
   <dd>A. Phillips; M. Davis. <a href="https://tools.ietf.org/html/bcp47">Tags for Identifying Languages</a>. September 2009. IETF Best Current Practice. URL: <a href="https://tools.ietf.org/html/bcp47">https://tools.ietf.org/html/bcp47</a>
   <dt id="biblio-service-workers">[SERVICE-WORKERS]
   <dd>Alex Russell; et al. <a href="https://w3c.github.io/ServiceWorker/">Service Workers 1</a>. URL: <a href="https://w3c.github.io/ServiceWorker/">https://w3c.github.io/ServiceWorker/</a>
   <dt id="biblio-url">[URL]
   <dd>Anne van Kesteren. <a href="https://url.spec.whatwg.org/">URL Standard</a>. Living Standard. URL: <a href="https://url.spec.whatwg.org/">https://url.spec.whatwg.org/</a>
   <dt id="biblio-vibration">[VIBRATION]
   <dd>Anssi Kostiainen. <a href="https://w3c.github.io/vibration/">Vibration API (Second Edition)</a>. URL: <a href="https://w3c.github.io/vibration/">https://w3c.github.io/vibration/</a>
   <dt id="biblio-webidl">[WEBIDL]
   <dd>Boris Zbarsky. <a href="https://heycam.github.io/webidl/">Web IDL</a>. URL: <a href="https://heycam.github.io/webidl/">https://heycam.github.io/webidl/</a>
  </dl>
  <h2 class="no-num no-ref heading settled" id="idl-index"><span class="content">IDL Index</span><a class="self-link" href="#idl-index"></a></h2>
<pre class="idl highlight def">[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed③"><c- g>Exposed</c-></a>=(<c- n>Window</c->,<c- n>Worker</c->)]
<c- b>interface</c-> <a href="#notification"><code><c- g>Notification</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://dom.spec.whatwg.org/#eventtarget" id="ref-for-eventtarget①"><c- n>EventTarget</c-></a> {
  <a class="idl-code" data-link-type="constructor" href="#dom-notification-notification" id="ref-for-dom-notification-notification②"><c- g>constructor</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①⑥"><c- b>DOMString</c-></a> <a href="#dom-notification-notification-title-options-title"><code><c- g>title</c-></code></a>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-notificationoptions" id="ref-for-dictdef-notificationoptions②"><c- n>NotificationOptions</c-></a> <a href="#dom-notification-notification-title-options-options"><code><c- g>options</c-></code></a> = {});

  <c- b>static</c-> <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-notificationpermission" id="ref-for-enumdef-notificationpermission③"><c- n>NotificationPermission</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="NotificationPermission" href="#dom-notification-permission" id="ref-for-dom-notification-permission①"><c- g>permission</c-></a>;
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed①①"><c- g>Exposed</c-></a>=<c- n>Window</c->] <c- b>static</c-> <c- b>Promise</c->&lt;<a class="n" data-link-type="idl-name" href="#enumdef-notificationpermission" id="ref-for-enumdef-notificationpermission①①"><c- n>NotificationPermission</c-></a>> <a class="idl-code" data-link-type="method" href="#dom-notification-requestpermission" id="ref-for-dom-notification-requestpermission①"><c- g>requestPermission</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#callbackdef-notificationpermissioncallback" id="ref-for-callbackdef-notificationpermissioncallback①"><c- n>NotificationPermissionCallback</c-></a> <a href="#dom-notification-requestpermission-deprecatedcallback-deprecatedcallback"><code><c- g>deprecatedCallback</c-></code></a>);

  <c- b>static</c-> <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long②"><c- b>unsigned</c-> <c- b>long</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="unsigned long" href="#dom-notification-maxactions" id="ref-for-dom-notification-maxactions①"><c- g>maxActions</c-></a>;

  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler⑥"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-notification-onclick" id="ref-for-dom-notification-onclick①"><c- g>onclick</c-></a>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler①①"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-notification-onshow" id="ref-for-dom-notification-onshow①"><c- g>onshow</c-></a>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler②①"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-notification-onerror" id="ref-for-dom-notification-onerror①"><c- g>onerror</c-></a>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler③①"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-notification-onclose" id="ref-for-dom-notification-onclose①"><c- g>onclose</c-></a>;

  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①⑤"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMString" href="#dom-notification-title" id="ref-for-dom-notification-title①"><c- g>title</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#enumdef-notificationdirection" id="ref-for-enumdef-notificationdirection②"><c- n>NotificationDirection</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="NotificationDirection" href="#dom-notification-dir" id="ref-for-dom-notification-dir①"><c- g>dir</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString②①"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMString" href="#dom-notification-lang" id="ref-for-dom-notification-lang①"><c- g>lang</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString③①"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMString" href="#dom-notification-body" id="ref-for-dom-notification-body①"><c- g>body</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString④①"><c- b>DOMString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMString" href="#dom-notification-tag" id="ref-for-dom-notification-tag①"><c- g>tag</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString⑦"><c- b>USVString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="USVString" href="#dom-notification-image" id="ref-for-dom-notification-image①"><c- g>image</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString①①"><c- b>USVString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="USVString" href="#dom-notification-icon" id="ref-for-dom-notification-icon①"><c- g>icon</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString②①"><c- b>USVString</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="USVString" href="#dom-notification-badge" id="ref-for-dom-notification-badge①"><c- g>badge</c-></a>;
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject③"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-unsigned-long" id="ref-for-idl-unsigned-long①①"><c- b>unsigned</c-> <c- b>long</c-></a>> <a class="idl-code" data-link-type="attribute" data-readonly data-type="FrozenArray<unsigned long>" href="#dom-notification-vibrate" id="ref-for-dom-notification-vibrate①"><c- g>vibrate</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://heycam.github.io/webidl/#DOMTimeStamp" id="ref-for-DOMTimeStamp①①"><c- n>DOMTimeStamp</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="DOMTimeStamp" href="#dom-notification-timestamp" id="ref-for-dom-notification-timestamp①"><c- g>timestamp</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean⑥"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-notification-renotify" id="ref-for-dom-notification-renotify①"><c- g>renotify</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean①①"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-notification-silent" id="ref-for-dom-notification-silent①"><c- g>silent</c-></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean②①"><c- b>boolean</c-></a> <a class="idl-code" data-link-type="attribute" data-readonly data-type="boolean" href="#dom-notification-requireinteraction" id="ref-for-dom-notification-requireinteraction①"><c- g>requireInteraction</c-></a>;
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject①①"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <c- b>any</c-> <a class="idl-code" data-link-type="attribute" data-readonly data-type="any" href="#dom-notification-data" id="ref-for-dom-notification-data①"><c- g>data</c-></a>;
  [<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#SameObject" id="ref-for-SameObject②①"><c- g>SameObject</c-></a>] <c- b>readonly</c-> <c- b>attribute</c-> <c- b>FrozenArray</c->&lt;<a class="n" data-link-type="idl-name" href="#dictdef-notificationaction" id="ref-for-dictdef-notificationaction④"><c- n>NotificationAction</c-></a>> <a class="idl-code" data-link-type="attribute" data-readonly data-type="FrozenArray<NotificationAction>" href="#dom-notification-actions" id="ref-for-dom-notification-actions①"><c- g>actions</c-></a>;

  <c- b>void</c-> <a class="idl-code" data-link-type="method" href="#dom-notification-close" id="ref-for-dom-notification-close①①"><c- g>close</c-></a>();
};

<c- b>dictionary</c-> <a href="#dictdef-notificationoptions"><code><c- g>NotificationOptions</c-></code></a> {
  <a class="n" data-link-type="idl-name" href="#enumdef-notificationdirection" id="ref-for-enumdef-notificationdirection①①"><c- n>NotificationDirection</c-></a> <a data-default="&quot;auto&quot;" data-type="NotificationDirection " href="#dom-notificationoptions-dir"><code><c- g>dir</c-></code></a> = "auto";
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑤①"><c- b>DOMString</c-></a> <a data-default="&quot;&quot;" data-type="DOMString " href="#dom-notificationoptions-lang"><code><c- g>lang</c-></code></a> = "";
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑥①"><c- b>DOMString</c-></a> <a data-default="&quot;&quot;" data-type="DOMString " href="#dom-notificationoptions-body"><code><c- g>body</c-></code></a> = "";
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑦①"><c- b>DOMString</c-></a> <a data-default="&quot;&quot;" data-type="DOMString " href="#dom-notificationoptions-tag"><code><c- g>tag</c-></code></a> = "";
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString③①"><c- b>USVString</c-></a> <a data-type="USVString " href="#dom-notificationoptions-image"><code><c- g>image</c-></code></a>;
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString④①"><c- b>USVString</c-></a> <a data-type="USVString " href="#dom-notificationoptions-icon"><code><c- g>icon</c-></code></a>;
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString⑤①"><c- b>USVString</c-></a> <a data-type="USVString " href="#dom-notificationoptions-badge"><code><c- g>badge</c-></code></a>;
  <a class="n" data-link-type="idl-name" href="https://w3c.github.io/vibration/#idl-def-vibratepattern" id="ref-for-idl-def-vibratepattern①"><c- n>VibratePattern</c-></a> <a data-type="VibratePattern " href="#dom-notificationoptions-vibrate"><code><c- g>vibrate</c-></code></a>;
  <a class="n" data-link-type="idl-name" href="https://heycam.github.io/webidl/#DOMTimeStamp" id="ref-for-DOMTimeStamp②①"><c- n>DOMTimeStamp</c-></a> <a data-type="DOMTimeStamp " href="#dom-notificationoptions-timestamp"><code><c- g>timestamp</c-></code></a>;
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean③①"><c- b>boolean</c-></a> <a data-default="false" data-type="boolean " href="#dom-notificationoptions-renotify"><code><c- g>renotify</c-></code></a> = <c- b>false</c->;
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean④①"><c- b>boolean</c-></a> <a data-default="false" data-type="boolean " href="#dom-notificationoptions-silent"><code><c- g>silent</c-></code></a> = <c- b>false</c->;
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-boolean" id="ref-for-idl-boolean⑤①"><c- b>boolean</c-></a> <a data-default="false" data-type="boolean " href="#dom-notificationoptions-requireinteraction"><code><c- g>requireInteraction</c-></code></a> = <c- b>false</c->;
  <c- b>any</c-> <a data-default="null" data-type="any " href="#dom-notificationoptions-data"><code><c- g>data</c-></code></a> = <c- b>null</c->;
  <c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#dictdef-notificationaction" id="ref-for-dictdef-notificationaction①①"><c- n>NotificationAction</c-></a>> <a data-default="[]" data-type="sequence<NotificationAction> " href="#dom-notificationoptions-actions"><code><c- g>actions</c-></code></a> = [];
};

<c- b>enum</c-> <a href="#enumdef-notificationpermission"><code><c- g>NotificationPermission</c-></code></a> {
  <a href="#dom-notificationpermission-default"><code><c- s>"default"</c-></code></a>,
  <a href="#dom-notificationpermission-denied"><code><c- s>"denied"</c-></code></a>,
  <a href="#dom-notificationpermission-granted"><code><c- s>"granted"</c-></code></a>
};

<c- b>enum</c-> <a href="#enumdef-notificationdirection"><code><c- g>NotificationDirection</c-></code></a> {
  <a href="#dom-notificationdirection-auto"><code><c- s>"auto"</c-></code></a>,
  <a href="#dom-notificationdirection-ltr"><code><c- s>"ltr"</c-></code></a>,
  <a href="#dom-notificationdirection-rtl"><code><c- s>"rtl"</c-></code></a>
};

<c- b>dictionary</c-> <a href="#dictdef-notificationaction"><code><c- g>NotificationAction</c-></code></a> {
  <c- b>required</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑧①"><c- b>DOMString</c-></a> <a data-type="DOMString " href="#dom-notificationaction-action"><code><c- g>action</c-></code></a>;
  <c- b>required</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString⑨①"><c- b>DOMString</c-></a> <a data-type="DOMString " href="#dom-notificationaction-title"><code><c- g>title</c-></code></a>;
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-USVString" id="ref-for-idl-USVString⑥①"><c- b>USVString</c-></a> <a data-type="USVString " href="#dom-notificationaction-icon"><code><c- g>icon</c-></code></a>;
};

<c- b>callback</c-> <a href="#callbackdef-notificationpermissioncallback"><code><c- g>NotificationPermissionCallback</c-></code></a> = <c- b>void</c-> (<a class="n" data-link-type="idl-name" href="#enumdef-notificationpermission" id="ref-for-enumdef-notificationpermission②①"><c- n>NotificationPermission</c-></a> <a href="#dom-notificationpermissioncallback-permission"><code><c- g>permission</c-></code></a>);

<c- b>dictionary</c-> <a href="#dictdef-getnotificationoptions"><code><c- g>GetNotificationOptions</c-></code></a> {
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①⓪①"><c- b>DOMString</c-></a> <a data-default="&quot;&quot;" data-type="DOMString " href="#dom-getnotificationoptions-tag"><code><c- g>tag</c-></code></a> = "";
};

<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://w3c.github.io/ServiceWorker/#serviceworkerregistration" id="ref-for-serviceworkerregistration①"><c- g>ServiceWorkerRegistration</c-></a> {
  <c- b>Promise</c->&lt;<c- b>void</c->> <a class="idl-code" data-link-type="method" href="#dom-serviceworkerregistration-shownotification" id="ref-for-dom-serviceworkerregistration-shownotification①①"><c- g>showNotification</c-></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①①①"><c- b>DOMString</c-></a> <a href="#dom-serviceworkerregistration-shownotification-title-options-title"><code><c- g>title</c-></code></a>, <c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-notificationoptions" id="ref-for-dictdef-notificationoptions①①"><c- n>NotificationOptions</c-></a> <a href="#dom-serviceworkerregistration-shownotification-title-options-options"><code><c- g>options</c-></code></a> = {});
  <c- b>Promise</c->&lt;<c- b>sequence</c->&lt;<a class="n" data-link-type="idl-name" href="#notification" id="ref-for-notification①①①"><c- n>Notification</c-></a>>> <a class="idl-code" data-link-type="method" href="#dom-serviceworkerregistration-getnotifications" id="ref-for-dom-serviceworkerregistration-getnotifications①"><c- g>getNotifications</c-></a>(<c- b>optional</c-> <a class="n" data-link-type="idl-name" href="#dictdef-getnotificationoptions" id="ref-for-dictdef-getnotificationoptions①"><c- n>GetNotificationOptions</c-></a> <a href="#dom-serviceworkerregistration-getnotifications-filter-filter"><code><c- g>filter</c-></code></a> = {});
};

[<a class="idl-code" data-link-type="extended-attribute" href="https://heycam.github.io/webidl/#Exposed" id="ref-for-Exposed②①"><c- g>Exposed</c-></a>=<c- n>ServiceWorker</c->]
<c- b>interface</c-> <a href="#notificationevent"><code><c- g>NotificationEvent</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://w3c.github.io/ServiceWorker/#extendableevent" id="ref-for-extendableevent①"><c- n>ExtendableEvent</c-></a> {
  <a href="#dom-notificationevent-notificationevent"><code><c- g>constructor</c-></code></a>(<a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①②①"><c- b>DOMString</c-></a> <a href="#dom-notificationevent-notificationevent-type-eventinitdict-type"><code><c- g>type</c-></code></a>, <a class="n" data-link-type="idl-name" href="#dictdef-notificationeventinit" id="ref-for-dictdef-notificationeventinit①"><c- n>NotificationEventInit</c-></a> <a href="#dom-notificationevent-notificationevent-type-eventinitdict-eventinitdict"><code><c- g>eventInitDict</c-></code></a>);

  <c- b>readonly</c-> <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="#notification" id="ref-for-notification①②①"><c- n>Notification</c-></a> <a data-readonly data-type="Notification" href="#dom-notificationevent-notification"><code><c- g>notification</c-></code></a>;
  <c- b>readonly</c-> <c- b>attribute</c-> <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①③①"><c- b>DOMString</c-></a> <a data-readonly data-type="DOMString" href="#dom-notificationevent-action"><code><c- g>action</c-></code></a>;
};

<c- b>dictionary</c-> <a href="#dictdef-notificationeventinit"><code><c- g>NotificationEventInit</c-></code></a> : <a class="n" data-link-type="idl-name" href="https://w3c.github.io/ServiceWorker/#dictdef-extendableeventinit" id="ref-for-dictdef-extendableeventinit①"><c- n>ExtendableEventInit</c-></a> {
  <c- b>required</c-> <a class="n" data-link-type="idl-name" href="#notification" id="ref-for-notification①③①"><c- n>Notification</c-></a> <a data-type="Notification " href="#dom-notificationeventinit-notification"><code><c- g>notification</c-></code></a>;
  <a class="idl-code" data-link-type="interface" href="https://heycam.github.io/webidl/#idl-DOMString" id="ref-for-idl-DOMString①④①"><c- b>DOMString</c-></a> <a data-default="&quot;&quot;" data-type="DOMString " href="#dom-notificationeventinit-action"><code><c- g>action</c-></code></a> = "";
};

<c- b>partial</c-> <c- b>interface</c-> <a class="idl-code" data-link-type="interface" href="https://w3c.github.io/ServiceWorker/#serviceworkerglobalscope" id="ref-for-serviceworkerglobalscope②①"><c- g>ServiceWorkerGlobalScope</c-></a> {
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler④①"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-serviceworkerglobalscope-onnotificationclick" id="ref-for-dom-serviceworkerglobalscope-onnotificationclick①"><c- g>onnotificationclick</c-></a>;
  <c- b>attribute</c-> <a class="n" data-link-type="idl-name" href="https://html.spec.whatwg.org/multipage/webappapis.html#eventhandler" id="ref-for-eventhandler⑤①"><c- n>EventHandler</c-></a> <a class="idl-code" data-link-type="attribute" data-type="EventHandler" href="#dom-serviceworkerglobalscope-onnotificationclose" id="ref-for-dom-serviceworkerglobalscope-onnotificationclose①"><c- g>onnotificationclose</c-></a>;
};

</pre>
  <aside class="dfn-panel" data-for="concept-notification">
   <b><a href="#concept-notification">#concept-notification</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-notification">2. Notifications</a> <a href="#ref-for-concept-notification①">(2)</a> <a href="#ref-for-concept-notification②">(3)</a> <a href="#ref-for-concept-notification③">(4)</a> <a href="#ref-for-concept-notification④">(5)</a> <a href="#ref-for-concept-notification⑤">(6)</a> <a href="#ref-for-concept-notification⑥">(7)</a> <a href="#ref-for-concept-notification⑦">(8)</a> <a href="#ref-for-concept-notification⑧">(9)</a> <a href="#ref-for-concept-notification⑨">(10)</a> <a href="#ref-for-concept-notification①⓪">(11)</a> <a href="#ref-for-concept-notification①①">(12)</a> <a href="#ref-for-concept-notification①②">(13)</a> <a href="#ref-for-concept-notification①③">(14)</a> <a href="#ref-for-concept-notification①④">(15)</a> <a href="#ref-for-concept-notification①⑤">(16)</a> <a href="#ref-for-concept-notification①⑥">(17)</a> <a href="#ref-for-concept-notification①⑦">(18)</a> <a href="#ref-for-concept-notification①⑧">(19)</a> <a href="#ref-for-concept-notification①⑨">(20)</a> <a href="#ref-for-concept-notification②⓪">(21)</a> <a href="#ref-for-concept-notification②①">(22)</a> <a href="#ref-for-concept-notification②②">(23)</a> <a href="#ref-for-concept-notification②③">(24)</a> <a href="#ref-for-concept-notification②④">(25)</a>
    <li><a href="#ref-for-concept-notification②⑤">2.1. Lifetime and UI integration</a>
    <li><a href="#ref-for-concept-notification②⑥">2.2. Permission model</a> <a href="#ref-for-concept-notification②⑦">(2)</a> <a href="#ref-for-concept-notification②⑧">(3)</a> <a href="#ref-for-concept-notification②⑨">(4)</a>
    <li><a href="#ref-for-concept-notification③⓪">2.3. Direction</a> <a href="#ref-for-concept-notification③①">(2)</a> <a href="#ref-for-concept-notification③②">(3)</a> <a href="#ref-for-concept-notification③③">(4)</a>
    <li><a href="#ref-for-concept-notification③④">2.4. Language</a> <a href="#ref-for-concept-notification③⑤">(2)</a>
    <li><a href="#ref-for-concept-notification③⑥">2.5. Resources</a>
    <li><a href="#ref-for-concept-notification③⑦">2.6. Showing a notification</a> <a href="#ref-for-concept-notification③⑧">(2)</a>
    <li><a href="#ref-for-concept-notification③⑨">2.7. Activating a notification</a>
    <li><a href="#ref-for-concept-notification④⓪">2.8. Closing a notification</a>
    <li><a href="#ref-for-concept-notification④①">3.1. Garbage collection</a>
    <li><a href="#ref-for-concept-notification④②">3.4. Object members</a> <a href="#ref-for-concept-notification④③">(2)</a> <a href="#ref-for-concept-notification④④">(3)</a> <a href="#ref-for-concept-notification④⑤">(4)</a> <a href="#ref-for-concept-notification④⑥">(5)</a> <a href="#ref-for-concept-notification④⑦">(6)</a> <a href="#ref-for-concept-notification④⑧">(7)</a> <a href="#ref-for-concept-notification④⑨">(8)</a> <a href="#ref-for-concept-notification⑤⓪">(9)</a> <a href="#ref-for-concept-notification⑤①">(10)</a> <a href="#ref-for-concept-notification⑤②">(11)</a> <a href="#ref-for-concept-notification⑤③">(12)</a> <a href="#ref-for-concept-notification⑤④">(13)</a> <a href="#ref-for-concept-notification⑤⑤">(14)</a> <a href="#ref-for-concept-notification⑤⑥">(15)</a> <a href="#ref-for-concept-notification⑤⑦">(16)</a> <a href="#ref-for-concept-notification⑤⑧">(17)</a> <a href="#ref-for-concept-notification⑤⑨">(18)</a> <a href="#ref-for-concept-notification⑥⓪">(19)</a>
    <li><a href="#ref-for-concept-notification⑥①">4. Service worker API</a> <a href="#ref-for-concept-notification⑥②">(2)</a> <a href="#ref-for-concept-notification⑥③">(3)</a> <a href="#ref-for-concept-notification⑥④">(4)</a> <a href="#ref-for-concept-notification⑥⑤">(5)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="service-worker-registration">
   <b><a href="#service-worker-registration">#service-worker-registration</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-service-worker-registration">2. Notifications</a> <a href="#ref-for-service-worker-registration①">(2)</a> <a href="#ref-for-service-worker-registration②">(3)</a>
    <li><a href="#ref-for-service-worker-registration③">4. Service worker API</a> <a href="#ref-for-service-worker-registration④">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="concept-title">
   <b><a href="#concept-title">#concept-title</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-title">2. Notifications</a>
    <li><a href="#ref-for-concept-title①">2.3. Direction</a> <a href="#ref-for-concept-title②">(2)</a>
    <li><a href="#ref-for-concept-title③">2.4. Language</a> <a href="#ref-for-concept-title④">(2)</a>
    <li><a href="#ref-for-concept-title⑤">3.4. Object members</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="body">
   <b><a href="#body">#body</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-body">2. Notifications</a>
    <li><a href="#ref-for-body①">2.3. Direction</a> <a href="#ref-for-body②">(2)</a>
    <li><a href="#ref-for-body③">2.4. Language</a>
    <li><a href="#ref-for-body④">3.4. Object members</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="concept-direction">
   <b><a href="#concept-direction">#concept-direction</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-direction">2. Notifications</a>
    <li><a href="#ref-for-concept-direction①">2.3. Direction</a> <a href="#ref-for-concept-direction②">(2)</a>
    <li><a href="#ref-for-concept-direction③">3.4. Object members</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="concept-language">
   <b><a href="#concept-language">#concept-language</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-language">2. Notifications</a>
    <li><a href="#ref-for-concept-language①">2.4. Language</a>
    <li><a href="#ref-for-concept-language②">3.4. Object members</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="tag">
   <b><a href="#tag">#tag</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-tag">2. Notifications</a> <a href="#ref-for-tag①">(2)</a>
    <li><a href="#ref-for-tag②">2.6. Showing a notification</a> <a href="#ref-for-tag③">(2)</a>
    <li><a href="#ref-for-tag④">3.4. Object members</a>
    <li><a href="#ref-for-tag⑤">4. Service worker API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="data">
   <b><a href="#data">#data</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-data">2. Notifications</a>
    <li><a href="#ref-for-data①">3.4. Object members</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="timestamp">
   <b><a href="#timestamp">#timestamp</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-timestamp">2. Notifications</a> <a href="#ref-for-timestamp①">(2)</a>
    <li><a href="#ref-for-timestamp②">3.4. Object members</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="concept-origin">
   <b><a href="#concept-origin">#concept-origin</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-concept-origin">2. Notifications</a>
    <li><a href="#ref-for-concept-origin②">2.6. Showing a notification</a> <a href="#ref-for-concept-origin③">(2)</a>
    <li><a href="#ref-for-concept-origin④">3.2. Constructors</a>
    <li><a href="#ref-for-concept-origin⑤">4. Service worker API</a> <a href="#ref-for-concept-origin⑥">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="renotify-preference-flag">
   <b><a href="#renotify-preference-flag">#renotify-preference-flag</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-renotify-preference-flag">2. Notifications</a>
    <li><a href="#ref-for-renotify-preference-flag①">2.6. Showing a notification</a>
    <li><a href="#ref-for-renotify-preference-flag②">3.4. Object members</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="silent-preference-flag">
   <b><a href="#silent-preference-flag">#silent-preference-flag</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-silent-preference-flag">2. Notifications</a>
    <li><a href="#ref-for-silent-preference-flag①">3.4. Object members</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="require-interaction-preference-flag">
   <b><a href="#require-interaction-preference-flag">#require-interaction-preference-flag</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-require-interaction-preference-flag">2. Notifications</a>
    <li><a href="#ref-for-require-interaction-preference-flag①">3.4. Object members</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="image-url">
   <b><a href="#image-url">#image-url</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-image-url">2. Notifications</a> <a href="#ref-for-image-url①">(2)</a>
    <li><a href="#ref-for-image-url②">2.5. Resources</a> <a href="#ref-for-image-url③">(2)</a>
    <li><a href="#ref-for-image-url④">3.4. Object members</a> <a href="#ref-for-image-url⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="icon-url">
   <b><a href="#icon-url">#icon-url</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-icon-url">2. Notifications</a> <a href="#ref-for-icon-url①">(2)</a>
    <li><a href="#ref-for-icon-url②">2.5. Resources</a> <a href="#ref-for-icon-url③">(2)</a>
    <li><a href="#ref-for-icon-url④">3.4. Object members</a> <a href="#ref-for-icon-url⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="badge-url">
   <b><a href="#badge-url">#badge-url</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-badge-url">2. Notifications</a> <a href="#ref-for-badge-url①">(2)</a>
    <li><a href="#ref-for-badge-url②">2.5. Resources</a> <a href="#ref-for-badge-url③">(2)</a>
    <li><a href="#ref-for-badge-url④">3.4. Object members</a> <a href="#ref-for-badge-url⑤">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="image-resource">
   <b><a href="#image-resource">#image-resource</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-image-resource">2. Notifications</a> <a href="#ref-for-image-resource①">(2)</a> <a href="#ref-for-image-resource②">(3)</a>
    <li><a href="#ref-for-image-resource③">2.5. Resources</a> <a href="#ref-for-image-resource④">(2)</a>
    <li><a href="#ref-for-image-resource⑤">2.6. Showing a notification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="icon-resource">
   <b><a href="#icon-resource">#icon-resource</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-icon-resource">2. Notifications</a> <a href="#ref-for-icon-resource①">(2)</a> <a href="#ref-for-icon-resource②">(3)</a> <a href="#ref-for-icon-resource③">(4)</a>
    <li><a href="#ref-for-icon-resource④">2.5. Resources</a> <a href="#ref-for-icon-resource⑤">(2)</a>
    <li><a href="#ref-for-icon-resource⑥">2.6. Showing a notification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="badge-resource">
   <b><a href="#badge-resource">#badge-resource</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-badge-resource">2. Notifications</a> <a href="#ref-for-badge-resource①">(2)</a> <a href="#ref-for-badge-resource②">(3)</a>
    <li><a href="#ref-for-badge-resource③">2.5. Resources</a> <a href="#ref-for-badge-resource④">(2)</a>
    <li><a href="#ref-for-badge-resource⑤">2.6. Showing a notification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="vibration-pattern">
   <b><a href="#vibration-pattern">#vibration-pattern</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-vibration-pattern">2. Notifications</a> <a href="#ref-for-vibration-pattern①">(2)</a> <a href="#ref-for-vibration-pattern②">(3)</a>
    <li><a href="#ref-for-vibration-pattern③">2.9. Alerting the user</a>
    <li><a href="#ref-for-vibration-pattern④">3.4. Object members</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="actions">
   <b><a href="#actions">#actions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-actions">2. Notifications</a> <a href="#ref-for-actions①">(2)</a> <a href="#ref-for-actions②">(3)</a> <a href="#ref-for-actions③">(4)</a> <a href="#ref-for-actions④">(5)</a>
    <li><a href="#ref-for-actions⑤">2.3. Direction</a> <a href="#ref-for-actions⑥">(2)</a> <a href="#ref-for-actions⑦">(3)</a>
    <li><a href="#ref-for-actions⑧">2.4. Language</a>
    <li><a href="#ref-for-actions⑨">2.5. Resources</a>
    <li><a href="#ref-for-actions①⓪">2.6. Showing a notification</a>
    <li><a href="#ref-for-actions①①">2.7. Activating a notification</a> <a href="#ref-for-actions①②">(2)</a> <a href="#ref-for-actions①③">(3)</a>
    <li><a href="#ref-for-actions①④">3.4. Object members</a>
    <li><a href="#ref-for-actions①⑤">3.5.2. Using actions from a service worker</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="action-title">
   <b><a href="#action-title">#action-title</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-action-title">2. Notifications</a>
    <li><a href="#ref-for-action-title①">2.3. Direction</a> <a href="#ref-for-action-title②">(2)</a>
    <li><a href="#ref-for-action-title③">3.4. Object members</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="action-name">
   <b><a href="#action-name">#action-name</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-action-name">2. Notifications</a>
    <li><a href="#ref-for-action-name①">2.7. Activating a notification</a>
    <li><a href="#ref-for-action-name②">3.4. Object members</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="action-icon-url">
   <b><a href="#action-icon-url">#action-icon-url</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-action-icon-url">2. Notifications</a> <a href="#ref-for-action-icon-url①">(2)</a>
    <li><a href="#ref-for-action-icon-url②">2.5. Resources</a> <a href="#ref-for-action-icon-url③">(2)</a>
    <li><a href="#ref-for-action-icon-url④">3.4. Object members</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="action-icon-resource">
   <b><a href="#action-icon-resource">#action-icon-resource</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-action-icon-resource">2. Notifications</a>
    <li><a href="#ref-for-action-icon-resource①">2.5. Resources</a> <a href="#ref-for-action-icon-resource②">(2)</a>
    <li><a href="#ref-for-action-icon-resource③">2.6. Showing a notification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="maximum-number-of-actions">
   <b><a href="#maximum-number-of-actions">#maximum-number-of-actions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-maximum-number-of-actions">2. Notifications</a>
    <li><a href="#ref-for-maximum-number-of-actions①">3.3. Static members</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="non-persistent-notification">
   <b><a href="#non-persistent-notification">#non-persistent-notification</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-non-persistent-notification">2.1. Lifetime and UI integration</a> <a href="#ref-for-non-persistent-notification①">(2)</a>
    <li><a href="#ref-for-non-persistent-notification②">2.6. Showing a notification</a>
    <li><a href="#ref-for-non-persistent-notification③">2.8. Closing a notification</a>
    <li><a href="#ref-for-non-persistent-notification④">3. API</a>
    <li><a href="#ref-for-non-persistent-notification⑤">3.5.1. Using events from a page</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="persistent-notification">
   <b><a href="#persistent-notification">#persistent-notification</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-persistent-notification">2. Notifications</a>
    <li><a href="#ref-for-persistent-notification①">2.1. Lifetime and UI integration</a> <a href="#ref-for-persistent-notification②">(2)</a> <a href="#ref-for-persistent-notification③">(3)</a>
    <li><a href="#ref-for-persistent-notification④">2.7. Activating a notification</a>
    <li><a href="#ref-for-persistent-notification⑤">2.8. Closing a notification</a>
    <li><a href="#ref-for-persistent-notification⑥">3. API</a>
    <li><a href="#ref-for-persistent-notification⑦">3.5.2. Using actions from a service worker</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="create-a-notification">
   <b><a href="#create-a-notification">#create-a-notification</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-create-a-notification">3.2. Constructors</a>
    <li><a href="#ref-for-create-a-notification①">4. Service worker API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="list-of-notifications">
   <b><a href="#list-of-notifications">#list-of-notifications</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-list-of-notifications">2.1. Lifetime and UI integration</a>
    <li><a href="#ref-for-list-of-notifications①">2.6. Showing a notification</a> <a href="#ref-for-list-of-notifications②">(2)</a> <a href="#ref-for-list-of-notifications③">(3)</a> <a href="#ref-for-list-of-notifications④">(4)</a>
    <li><a href="#ref-for-list-of-notifications⑤">2.8. Closing a notification</a> <a href="#ref-for-list-of-notifications⑥">(2)</a>
    <li><a href="#ref-for-list-of-notifications⑦">3.1. Garbage collection</a>
    <li><a href="#ref-for-list-of-notifications⑧">4. Service worker API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="permission">
   <b><a href="#permission">#permission</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-permission">2.2. Permission model</a> <a href="#ref-for-permission①">(2)</a>
    <li><a href="#ref-for-permission②">3.2. Constructors</a>
    <li><a href="#ref-for-permission③">3.3. Static members</a> <a href="#ref-for-permission④">(2)</a> <a href="#ref-for-permission⑤">(3)</a>
    <li><a href="#ref-for-permission⑥">4. Service worker API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="fetch-steps">
   <b><a href="#fetch-steps">#fetch-steps</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fetch-steps">3.2. Constructors</a>
    <li><a href="#ref-for-fetch-steps①">4. Service worker API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="show-steps">
   <b><a href="#show-steps">#show-steps</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-show-steps">2. Notifications</a>
    <li><a href="#ref-for-show-steps①">3.2. Constructors</a>
    <li><a href="#ref-for-show-steps②">4. Service worker API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="close-steps">
   <b><a href="#close-steps">#close-steps</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-close-steps">2.1. Lifetime and UI integration</a>
    <li><a href="#ref-for-close-steps①">2.8. Closing a notification</a>
    <li><a href="#ref-for-close-steps②">3.4. Object members</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="handle-close-events">
   <b><a href="#handle-close-events">#handle-close-events</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-handle-close-events">2.6. Showing a notification</a>
    <li><a href="#ref-for-handle-close-events①">2.8. Closing a notification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="alert-steps">
   <b><a href="#alert-steps">#alert-steps</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-alert-steps">2.6. Showing a notification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="notification">
   <b><a href="#notification">#notification</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-notification">2.1. Lifetime and UI integration</a>
    <li><a href="#ref-for-notification①">2.6. Showing a notification</a>
    <li><a href="#ref-for-notification②">2.7. Activating a notification</a>
    <li><a href="#ref-for-notification③">2.8. Closing a notification</a>
    <li><a href="#ref-for-notification④">3. API</a> <a href="#ref-for-notification⑤">(2)</a> <a href="#ref-for-notification⑥">(3)</a>
    <li><a href="#ref-for-notification⑦">3.1. Garbage collection</a>
    <li><a href="#ref-for-notification⑧">3.2. Constructors</a>
    <li><a href="#ref-for-notification⑨">3.4. Object members</a>
    <li><a href="#ref-for-notification①⓪">3.5.1. Using events from a page</a>
    <li><a href="#ref-for-notification①①">4. Service worker API</a> <a href="#ref-for-notification①②">(2)</a> <a href="#ref-for-notification①③">(3)</a> <a href="#ref-for-notification①④">(4)</a> <a href="#ref-for-notification①⑤">(5)</a> <a href="#ref-for-notification①⑥">(6)</a> <a href="#ref-for-notification①⑦">(7)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-notificationoptions">
   <b><a href="#dictdef-notificationoptions">#dictdef-notificationoptions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-notificationoptions">3. API</a>
    <li><a href="#ref-for-dictdef-notificationoptions①">4. Service worker API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="enumdef-notificationpermission">
   <b><a href="#enumdef-notificationpermission">#enumdef-notificationpermission</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enumdef-notificationpermission">3. API</a> <a href="#ref-for-enumdef-notificationpermission①">(2)</a> <a href="#ref-for-enumdef-notificationpermission②">(3)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="enumdef-notificationdirection">
   <b><a href="#enumdef-notificationdirection">#enumdef-notificationdirection</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-enumdef-notificationdirection">3. API</a> <a href="#ref-for-enumdef-notificationdirection①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-notificationaction">
   <b><a href="#dictdef-notificationaction">#dictdef-notificationaction</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-notificationaction">3. API</a> <a href="#ref-for-dictdef-notificationaction①">(2)</a>
    <li><a href="#ref-for-dictdef-notificationaction②">3.4. Object members</a> <a href="#ref-for-dictdef-notificationaction③">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-notificationaction-action">
   <b><a href="#dom-notificationaction-action">#dom-notificationaction-action</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-notificationaction-action">3.4. Object members</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-notificationaction-title">
   <b><a href="#dom-notificationaction-title">#dom-notificationaction-title</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-notificationaction-title">3.4. Object members</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-notificationaction-icon">
   <b><a href="#dom-notificationaction-icon">#dom-notificationaction-icon</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-notificationaction-icon">3.4. Object members</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="callbackdef-notificationpermissioncallback">
   <b><a href="#callbackdef-notificationpermissioncallback">#callbackdef-notificationpermissioncallback</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-callbackdef-notificationpermissioncallback">3. API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-notification-notification">
   <b><a href="#dom-notification-notification">#dom-notification-notification</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-notification-notification">3. API</a> <a href="#ref-for-dom-notification-notification①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-notification-permission">
   <b><a href="#dom-notification-permission">#dom-notification-permission</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-notification-permission">3. API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-notification-requestpermission">
   <b><a href="#dom-notification-requestpermission">#dom-notification-requestpermission</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-notification-requestpermission">3. API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-notification-maxactions">
   <b><a href="#dom-notification-maxactions">#dom-notification-maxactions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-notification-maxactions">3. API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-notification-onclick">
   <b><a href="#dom-notification-onclick">#dom-notification-onclick</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-notification-onclick">3. API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-notification-onshow">
   <b><a href="#dom-notification-onshow">#dom-notification-onshow</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-notification-onshow">3. API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-notification-onerror">
   <b><a href="#dom-notification-onerror">#dom-notification-onerror</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-notification-onerror">3. API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-notification-onclose">
   <b><a href="#dom-notification-onclose">#dom-notification-onclose</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-notification-onclose">3. API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-notification-close">
   <b><a href="#dom-notification-close">#dom-notification-close</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-notification-close">2.1. Lifetime and UI integration</a>
    <li><a href="#ref-for-dom-notification-close①">3. API</a>
    <li><a href="#ref-for-dom-notification-close②">3.5.4. Using the tag member for a single instance</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-notification-title">
   <b><a href="#dom-notification-title">#dom-notification-title</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-notification-title">3. API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-notification-dir">
   <b><a href="#dom-notification-dir">#dom-notification-dir</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-notification-dir">3. API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-notification-lang">
   <b><a href="#dom-notification-lang">#dom-notification-lang</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-notification-lang">3. API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-notification-body">
   <b><a href="#dom-notification-body">#dom-notification-body</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-notification-body">3. API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-notification-tag">
   <b><a href="#dom-notification-tag">#dom-notification-tag</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-notification-tag">3. API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-notification-image">
   <b><a href="#dom-notification-image">#dom-notification-image</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-notification-image">3. API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-notification-icon">
   <b><a href="#dom-notification-icon">#dom-notification-icon</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-notification-icon">3. API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-notification-badge">
   <b><a href="#dom-notification-badge">#dom-notification-badge</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-notification-badge">3. API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-notification-vibrate">
   <b><a href="#dom-notification-vibrate">#dom-notification-vibrate</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-notification-vibrate">3. API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-notification-timestamp">
   <b><a href="#dom-notification-timestamp">#dom-notification-timestamp</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-notification-timestamp">3. API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-notification-renotify">
   <b><a href="#dom-notification-renotify">#dom-notification-renotify</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-notification-renotify">3. API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-notification-silent">
   <b><a href="#dom-notification-silent">#dom-notification-silent</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-notification-silent">3. API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-notification-requireinteraction">
   <b><a href="#dom-notification-requireinteraction">#dom-notification-requireinteraction</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-notification-requireinteraction">3. API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-notification-data">
   <b><a href="#dom-notification-data">#dom-notification-data</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-notification-data">3. API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-notification-actions">
   <b><a href="#dom-notification-actions">#dom-notification-actions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-notification-actions">3. API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-getnotificationoptions">
   <b><a href="#dictdef-getnotificationoptions">#dictdef-getnotificationoptions</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-getnotificationoptions">4. Service worker API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="notificationevent">
   <b><a href="#notificationevent">#notificationevent</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-notificationevent">4. Service worker API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-notificationevent-notification">
   <b><a href="#dom-notificationevent-notification">#dom-notificationevent-notification</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-notificationevent-notification">4. Service worker API</a> <a href="#ref-for-dom-notificationevent-notification①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-notificationevent-action">
   <b><a href="#dom-notificationevent-action">#dom-notificationevent-action</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-notificationevent-action">4. Service worker API</a> <a href="#ref-for-dom-notificationevent-action①">(2)</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dictdef-notificationeventinit">
   <b><a href="#dictdef-notificationeventinit">#dictdef-notificationeventinit</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dictdef-notificationeventinit">4. Service worker API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-serviceworkerregistration-shownotification">
   <b><a href="#dom-serviceworkerregistration-shownotification">#dom-serviceworkerregistration-shownotification</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-serviceworkerregistration-shownotification">3. API</a>
    <li><a href="#ref-for-dom-serviceworkerregistration-shownotification①">4. Service worker API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-serviceworkerregistration-getnotifications">
   <b><a href="#dom-serviceworkerregistration-getnotifications">#dom-serviceworkerregistration-getnotifications</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-serviceworkerregistration-getnotifications">4. Service worker API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="fire-a-service-worker-notification-event">
   <b><a href="#fire-a-service-worker-notification-event">#fire-a-service-worker-notification-event</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-fire-a-service-worker-notification-event">2.7. Activating a notification</a>
    <li><a href="#ref-for-fire-a-service-worker-notification-event①">2.8. Closing a notification</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-serviceworkerglobalscope-onnotificationclick">
   <b><a href="#dom-serviceworkerglobalscope-onnotificationclick">#dom-serviceworkerglobalscope-onnotificationclick</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-serviceworkerglobalscope-onnotificationclick">4. Service worker API</a>
   </ul>
  </aside>
  <aside class="dfn-panel" data-for="dom-serviceworkerglobalscope-onnotificationclose">
   <b><a href="#dom-serviceworkerglobalscope-onnotificationclose">#dom-serviceworkerglobalscope-onnotificationclose</a></b><b>Referenced in:</b>
   <ul>
    <li><a href="#ref-for-dom-serviceworkerglobalscope-onnotificationclose">4. Service worker API</a>
   </ul>
  </aside>
<script>/* script-dfn-panel */

document.body.addEventListener("click", function(e) {
    var queryAll = function(sel) { return [].slice.call(document.querySelectorAll(sel)); }
    // Find the dfn element or panel, if any, that was clicked on.
    var el = e.target;
    var target;
    var hitALink = false;
    while(el.parentElement) {
        if(el.tagName == "A") {
            // Clicking on a link in a <dfn> shouldn't summon the panel
            hitALink = true;
        }
        if(el.classList.contains("dfn-paneled")) {
            target = "dfn";
            break;
        }
        if(el.classList.contains("dfn-panel")) {
            target = "dfn-panel";
            break;
        }
        el = el.parentElement;
    }
    if(target != "dfn-panel") {
        // Turn off any currently "on" or "activated" panels.
        queryAll(".dfn-panel.on, .dfn-panel.activated").forEach(function(el){
            el.classList.remove("on");
            el.classList.remove("activated");
        });
    }
    if(target == "dfn" && !hitALink) {
        // open the panel
        var dfnPanel = document.querySelector(".dfn-panel[data-for='" + el.id + "']");
        if(dfnPanel) {
            dfnPanel.classList.add("on");
            var rect = el.getBoundingClientRect();
            dfnPanel.style.left = window.scrollX + rect.right + 5 + "px";
            dfnPanel.style.top = window.scrollY + rect.top + "px";
            var panelRect = dfnPanel.getBoundingClientRect();
            var panelWidth = panelRect.right - panelRect.left;
            if(panelRect.right > document.body.scrollWidth && (rect.left - (panelWidth + 5)) > 0) {
                // Reposition, because the panel is overflowing
                dfnPanel.style.left = window.scrollX + rect.left - (panelWidth + 5) + "px";
            }
        } else {
            console.log("Couldn't find .dfn-panel[data-for='" + el.id + "']");
        }
    } else if(target == "dfn-panel") {
        // Switch it to "activated" state, which pins it.
        el.classList.add("activated");
        el.style.left = null;
        el.style.top = null;
    }

});
</script>